Bài Junior dành cho bạn đã nắm nền tảng React Native và muốn chứng minh rằng mình có thể nhận task thật: dựng UI, gọi API, xử lý state, debug lỗi cơ bản và phối hợp trong quy trình Git/PR.
Ở level Junior, nhà tuyển dụng thường không đòi bạn thiết kế kiến trúc lớn. Họ muốn thấy bạn hiểu bản chất, biết hỏi khi mơ hồ, biết debug có phương pháp và viết code đủ sạch để người khác review được.
Mỗi câu trả lời bên dưới là phiên bản gợi ý. Khi đi phỏng vấn, bạn nên nối thêm trải nghiệm thật của mình: màn hình đã làm, bug đã gặp, quyết định kỹ thuật đã chọn và kết quả sau khi xử lý.
Nền tảng React Native
1. React Native là gì và khác gì so với ứng dụng native thuần?
React Native cho phép viết UI bằng JavaScript/TypeScript và render ra component native trên iOS, Android. Điểm mạnh là chia sẻ phần lớn logic giữa hai nền tảng, nhưng vẫn cần hiểu hành vi riêng của từng platform.
2. JSX là gì?
JSX là cú pháp mô tả UI gần giống HTML nhưng thực chất được biên dịch thành lời gọi JavaScript. Trong React Native, JSX dùng component như View, Text, Image thay vì div hay span.
3. View và Text khác nhau thế nào?
View là container bố cục, còn Text dùng để hiển thị chữ. Trong React Native, text phải nằm trong Text, không đặt chuỗi trực tiếp bên trong View.
4. Style trong React Native hoạt động ra sao?
Style thường được viết bằng object JavaScript hoặc StyleSheet.create. Tên thuộc tính gần CSS nhưng dùng camelCase và layout mặc định theo Flexbox.
5. Flexbox trong React Native có điểm nào cần nhớ?
Flexbox giúp chia layout theo trục chính và trục phụ. Khác web, flexDirection mặc định trong React Native là column.
6. Platform-specific code dùng khi nào?
Dùng khi iOS và Android cần logic hoặc UI khác nhau, ví dụ quyền truy cập, native module, spacing, shadow. Có thể dùng Platform.OS hoặc file .ios.tsx/.android.tsx.
7. Metro bundler là gì?
Metro là bundler mặc định của React Native, chịu trách nhiệm gom JavaScript, transform code và phục vụ bundle cho app khi dev.
8. Hermes là gì?
Hermes là JavaScript engine tối ưu cho React Native, giúp giảm thời gian khởi động và cải thiện hiệu năng runtime trong nhiều trường hợp.
Component, props, state và hooks
9. Component là gì?
Component là khối UI có thể tái sử dụng, nhận dữ liệu qua props và có thể quản lý trạng thái riêng. Người mới nên tách component theo trách nhiệm rõ ràng, không tách quá vụn chỉ vì file dài.
10. Props dùng để làm gì?
Props truyền dữ liệu hoặc callback từ component cha xuống component con. Props nên được xem là read-only trong component nhận.
11. State khác props thế nào?
Props đến từ bên ngoài component, còn state là dữ liệu nội bộ có thể thay đổi theo tương tác hoặc lifecycle. Khi state đổi, React render lại phần UI liên quan.
12. useState dùng khi nào?
useState dùng cho trạng thái cục bộ như text input, loading, selected tab, modal open. Nếu state phụ thuộc nhiều nơi, có thể cân nhắc context hoặc state management.
13. useEffect dùng để làm gì?
useEffect chạy side effect sau render như gọi API, đăng ký listener, đồng bộ dữ liệu. Cần khai báo dependency đúng để tránh chạy thiếu hoặc chạy lặp vô hạn.
14. Tại sao không nên gọi hook trong if/for?
Hook phải được gọi theo cùng thứ tự ở mỗi lần render để React map đúng state nội bộ. Vì vậy hook nên đặt ở top-level của function component.
15. Controlled input là gì?
Controlled input là input có value lấy từ state và cập nhật qua onChangeText. Cách này giúp validate, reset và submit form dễ hơn.
16. Khi nào nên tách custom hook?
Khi một đoạn logic state/effect được dùng lại hoặc làm component quá rối, custom hook giúp đóng gói logic mà vẫn giữ UI gọn.
17. Key trong list dùng để làm gì?
Key giúp React nhận diện item khi thêm, xóa, sắp xếp. Key nên ổn định như id, không nên dùng index nếu danh sách có thể thay đổi thứ tự.
UI, list và form
18. FlatList khác ScrollView thế nào?
ScrollView render tất cả item cùng lúc, phù hợp nội dung ngắn. FlatList render theo cửa sổ nên phù hợp danh sách dài và hiệu năng tốt hơn.
19. TouchableOpacity và Pressable khác nhau gì?
Pressable linh hoạt hơn vì hỗ trợ nhiều trạng thái như pressed, hovered, focused. TouchableOpacity vẫn phổ biến cho nút đơn giản.
20. SafeAreaView dùng để làm gì?
SafeAreaView giúp nội dung tránh tai thỏ, status bar hoặc vùng gesture. Với app thực tế thường dùng react-native-safe-area-context để xử lý tốt hơn.
21. Image trong React Native nhận source như thế nào?
Ảnh local dùng require, ảnh remote dùng object có uri. Với ảnh remote nên chú ý kích thước, cache và placeholder khi tải chậm.
22. Làm sao xử lý loading và error khi gọi API?
Thường cần ba trạng thái: loading, data, error. UI nên có spinner hoặc skeleton, thông báo lỗi dễ hiểu và nút thử lại.
23. Form cơ bản cần kiểm tra những gì?
Cần validate required, định dạng email/số điện thoại, độ dài và hiển thị lỗi gần input. Với form lớn có thể dùng React Hook Form.
24. KeyboardAvoidingView dùng khi nào?
Dùng để tránh bàn phím che input, đặc biệt màn hình login/register. Cần test cả iOS và Android vì hành vi keyboard khác nhau.
25. RefreshControl dùng để làm gì?
RefreshControl thêm pull-to-refresh cho ScrollView hoặc FlatList. Cần quản lý refreshing state đúng để UI không bị kẹt.
26. Làm sao render empty state cho list?
FlatList có ListEmptyComponent. Empty state nên nói rõ chưa có dữ liệu hay đang lọc không ra kết quả.
27. Tại sao cần accessibilityLabel?
Nó giúp screen reader hiểu mục đích của nút hoặc thành phần UI. Đây là thói quen tốt ngay cả ở level junior.
Navigation, API và dữ liệu
28. React Navigation dùng để làm gì?
React Navigation quản lý luồng màn hình như stack, tab, drawer. Nó giúp truyền params, điều hướng và xử lý deep link trong app React Native.
29. Stack navigation phù hợp tình huống nào?
Stack dùng cho luồng đi sâu từng màn hình như danh sách -> chi tiết -> chỉnh sửa. Người dùng có thể back về màn hình trước.
30. Tab navigation phù hợp tình huống nào?
Tab dùng cho các khu vực chính ngang hàng như Home, Search, Profile. Không nên nhồi quá nhiều tab vì mobile cần dễ chạm và dễ nhớ.
31. Route params nên dùng ra sao?
Params nên nhỏ gọn như id hoặc filter. Không nên truyền object lớn vì dễ stale data và khó debug khi app phức tạp.
32. fetch API hoạt động như thế nào?
fetch gửi request HTTP và trả về Promise. Cần xử lý status code, parse JSON, catch error và hủy hoặc bỏ qua response khi component unmount nếu cần.
33. AsyncStorage dùng để làm gì?
AsyncStorage lưu dữ liệu key-value đơn giản như token, preference, onboarding flag. Không nên lưu dữ liệu nhạy cảm nếu chưa mã hóa hoặc dùng secure storage.
34. Token đăng nhập thường được lưu thế nào?
Với app production nên dùng secure storage/keychain/keystore thay vì AsyncStorage thường. Khi gọi API cần gắn token vào header và xử lý hết hạn token.
35. REST API và GraphQL khác nhau gì ở mức cơ bản?
REST tổ chức endpoint theo resource, GraphQL cho client query đúng dữ liệu cần. Junior chỉ cần hiểu cách gọi, parse response và xử lý lỗi nhất quán.
36. Pagination trong list xử lý thế nào?
Dùng page/cursor từ API, gọi thêm khi onEndReached, tránh gọi trùng bằng loadingMore flag và hiển thị footer loading.
Debug, testing và workflow
37. Bạn debug React Native bằng công cụ nào?
Có thể dùng React Native DevTools, Flipper tùy setup, console log, network inspector và debugger trong IDE. Quan trọng là biết khoanh vùng lỗi UI, state, API hay native build.
38. Lỗi app crash khác lỗi JavaScript như thế nào?
Lỗi JavaScript thường hiện red screen hoặc log rõ trong Metro, còn crash native có thể làm app tắt hẳn và cần xem log Xcode/Android Studio.
39. npm và yarn khác nhau gì?
Cả hai đều quản lý package JavaScript. Trong team nên dùng thống nhất một tool theo lockfile để tránh lệch version.
40. package-lock.json/yarn.lock để làm gì?
Lockfile cố định version dependency đã resolve, giúp máy dev và CI cài cùng phiên bản. Không nên xóa lockfile tùy tiện.
41. Test component cơ bản viết như thế nào?
Có thể dùng Jest và React Native Testing Library để render component, tìm text/button và mô phỏng tương tác. Junior nên biết test hành vi người dùng thay vì test implementation detail.
42. Git workflow cơ bản khi nhận task là gì?
Tạo branch, commit nhỏ theo ý nghĩa, pull/rebase cập nhật, mở PR và phản hồi review. Commit message nên mô tả thay đổi thực tế.
43. Khi gặp bug khó, bạn xử lý ra sao?
Tái hiện bug, thu hẹp phạm vi, kiểm tra log, so sánh dữ liệu đầu vào và tạo giả thuyết nhỏ để kiểm chứng. Không nên sửa mò nhiều chỗ cùng lúc.
Tình huống thực tế
44. Màn hình bị giật khi scroll danh sách dài, bạn kiểm tra gì trước?
Kiểm tra đang dùng FlatList hay ScrollView, item có render quá nặng không, key có ổn định không và có truyền inline function/object gây render lại nhiều không.
45. Nút bấm không phản hồi trên Android nhưng iOS bình thường, bạn làm gì?
Kiểm tra overlay che touch, zIndex/elevation, disabled state, platform-specific style và log onPress. Sau đó test trên thiết bị thật nếu simulator không tái hiện.
46. API trả dữ liệu chậm, UI nên hiển thị thế nào?
Hiển thị loading rõ ràng, giữ layout ổn định, tránh màn hình trắng. Nếu lỗi thì có message và nút retry.
47. Bạn nhận design Figma, bắt đầu cắt UI như thế nào?
Xác định spacing, typography, component lặp lại, trạng thái loading/error/empty. Sau đó dựng layout responsive trước rồi nối dữ liệu.
48. Khi nào nên hỏi lại PM/designer?
Khi acceptance criteria mơ hồ, state thiếu, dữ liệu API không khớp design hoặc có trade-off ảnh hưởng trải nghiệm. Hỏi sớm giúp tránh sửa lại nhiều.
49. Nếu build Android fail sau khi cài package mới, bạn kiểm tra gì?
Đọc lỗi Gradle, kiểm tra native dependency, minSdk/compileSdk, autolinking và hướng dẫn cài đặt của package. Không chỉ xóa node_modules mà không hiểu lỗi.
50. Điểm mạnh của bạn khi làm React Native là gì?
Nên trả lời bằng ví dụ cụ thể: đã làm màn hình nào, xử lý bug gì, học được gì. Nhà tuyển dụng đánh giá cách bạn suy nghĩ hơn là câu trả lời chung chung.
Cách luyện tập trước buổi phỏng vấn
- Chọn 10 câu yếu nhất và tự trả lời thành tiếng trong 2 phút mỗi câu.
- Với câu có tính tình huống, hãy dùng format: bối cảnh, lựa chọn, trade-off, kết quả.
- Chuẩn bị một mini project React Native có navigation, API, form, list, loading, error state và một vài test cơ bản.
