Bài này tổng hợp 50 câu hỏi phỏng vấn fresher React Native theo kiểu thực tế: câu trả lời không quá dài, nhưng đủ ý để bạn hiểu và diễn đạt lại bằng lời của mình. Nếu bạn đang chuẩn bị đi phỏng vấn vị trí fresher/junior React Native, hãy dùng bài này như một checklist ôn tập.
Về chuyên mục, bài dạng này nên nằm trong mục Phỏng vấn, đồng thời gắn thêm React Native và Lập trình Mobile. Như vậy sau này blog có thể mở rộng thêm các bộ câu hỏi Backend, DevOps, Flutter mà không làm rối mục Tutorial.
Cách học bộ câu hỏi này
Đừng học thuộc từng chữ. Hãy đọc câu hỏi, tự trả lời trước, sau đó so với phần gợi ý. Với fresher, nhà tuyển dụng thường muốn thấy bạn hiểu nền tảng, biết cách suy nghĩ khi gặp lỗi, và đã từng tự build một app nhỏ có navigation, form, list và API.
Nhóm 1: React Native cơ bản
1. React Native là gì?
React Native là framework giúp xây dựng ứng dụng iOS và Android bằng React. Bạn viết UI bằng component và logic bằng JavaScript hoặc TypeScript, còn framework ánh xạ giao diện sang thành phần native của từng nền tảng.
2. React Native khác React web ở điểm nào?
React web render ra DOM như div, span, còn React Native dùng core component như View, Text, Image. Tư duy component giống nhau, nhưng layout, gesture, keyboard, permission và build app mobile là những phần khác web.
3. React Native có phải WebView không?
Không. React Native không render toàn bộ app trong WebView. Các component như View và Text được nối với view native, còn JavaScript điều khiển logic và trạng thái giao diện.
4. Expo là gì và khi nào nên dùng?
Expo là bộ công cụ/framework giúp tạo và chạy app React Native nhanh hơn, đặc biệt phù hợp với người mới hoặc MVP. Nếu dự án cần custom native module sâu, team có thể cân nhắc Bare React Native hoặc Expo prebuild.
5. Core component trong React Native là gì?
Core component là các component có sẵn như View, Text, Image, ScrollView, TextInput, Pressable, FlatList. Đây là các viên gạch cơ bản để dựng UI mobile.
6. JSX là gì?
JSX là cú pháp giúp viết giao diện trong JavaScript. Nó nhìn giống HTML, nhưng thực chất được React xử lý thành lời gọi component. Trong React Native, JSX thường chứa View, Text, custom component và expression JavaScript.
7. Component là gì?
Component là một phần UI độc lập, có thể tái sử dụng. Ví dụ ArticleCard, PrimaryButton, ProfileHeader. Component tốt nên có tên rõ ràng và làm một nhiệm vụ chính.
8. Function component là gì?
Function component là một hàm trả về JSX. Đây là cách viết phổ biến trong React/React Native hiện đại, thường kết hợp với hooks như useState và useEffect để quản lý logic.
Nhóm 2: Props, State và Hooks
9. Props là gì?
Props là dữ liệu component cha truyền xuống component con. Props giúp component linh hoạt hơn, ví dụ một ArticleCard có thể nhận title, excerpt, thumbnail để hiển thị nhiều bài khác nhau.
10. State là gì?
State là dữ liệu component cần ghi nhớ và có thể thay đổi theo tương tác người dùng hoặc dữ liệu trả về từ API. Khi state thay đổi, React render lại component để UI phản ánh trạng thái mới.
11. Props khác state thế nào?
Props được truyền từ bên ngoài vào component và thường không nên bị sửa trong component con. State được quản lý bên trong component hoặc ở component cha gần nhất cần dữ liệu đó.
12. useState dùng để làm gì?
useState dùng để khai báo state trong function component. Nó trả về giá trị hiện tại và một hàm cập nhật, ví dụ const [count, setCount] = useState(0).
13. Vì sao không nên sửa state trực tiếp?
React cần biết state đã thay đổi để render lại UI. Nếu sửa trực tiếp object hoặc array cũ, React có thể không nhận ra thay đổi hoặc code trở nên khó đoán. Nên tạo giá trị mới rồi gọi hàm set state.
14. useEffect dùng để làm gì?
useEffect dùng cho các tác vụ phụ sau render như gọi API, đăng ký listener, dùng timer hoặc đồng bộ với hệ thống bên ngoài React. Không nên dùng useEffect cho mọi logic tính toán đơn giản.
15. Dependency array trong useEffect là gì?
Dependency array cho React biết effect phụ thuộc vào giá trị nào. [] nghĩa là chạy sau lần render đầu tiên. [userId] nghĩa là chạy lại khi userId thay đổi.
16. Cleanup trong useEffect là gì?
Cleanup là function được return từ effect để dọn tài nguyên như timer, subscription hoặc listener. Ví dụ dùng clearInterval khi component unmount để tránh rò rỉ tài nguyên.
17. Custom hook là gì?
Custom hook là hàm bắt đầu bằng use để tái sử dụng logic hooks giữa nhiều component. Ví dụ useToggle, useFetch, useDebounce.
18. Quy tắc quan trọng khi dùng hooks là gì?
Chỉ gọi hooks ở cấp cao nhất của function component hoặc custom hook, không gọi trong if, vòng lặp hoặc callback lồng sâu. Điều này giúp React giữ đúng thứ tự hooks qua các lần render.
Nhóm 3: Style, Layout và UI
19. Style trong React Native viết như thế nào?
Style thường được viết bằng object JavaScript, có thể dùng inline hoặc StyleSheet.create. Tên thuộc tính dùng camelCase như backgroundColor, fontSize, marginTop.
20. React Native có dùng CSS như web không?
Không dùng CSS file truyền thống. Một số thuộc tính giống CSS nhưng không phải tất cả đều hỗ trợ. Người mới nên đọc docs của React Native thay vì bê nguyên CSS web sang.
21. Flexbox trong React Native khác web ở điểm nào?
Khác biệt dễ nhớ nhất là flexDirection mặc định trong React Native là column, còn trên web thường là row. Các khái niệm như justifyContent và alignItems vẫn rất quan trọng.
22. flex: 1 nghĩa là gì?
flex: 1 thường nghĩa là component chiếm phần không gian còn lại trong parent. Nó hay được dùng cho container toàn màn hình hoặc vùng content cần giãn đầy không gian.
23. justifyContent và alignItems khác nhau thế nào?
justifyContent căn theo trục chính, còn alignItems căn theo trục phụ. Trục chính phụ thuộc vào flexDirection: column thì trục chính là dọc, row thì trục chính là ngang.
24. Vì sao text phải nằm trong Text component?
React Native yêu cầu nội dung chữ phải nằm trong Text. Không nên đặt string trực tiếp trong View, vì sẽ gây lỗi hoặc hành vi không đúng.
25. Pressable khác TouchableOpacity thế nào?
Pressable là API mới và linh hoạt hơn để xử lý trạng thái press, hover, focus. TouchableOpacity vẫn dùng được, nhưng Pressable thường phù hợp hơn khi cần custom trạng thái tương tác.
26. SafeAreaView dùng để làm gì?
SafeAreaView giúp nội dung tránh vùng tai thỏ, status bar hoặc cạnh màn hình đặc biệt trên thiết bị. Trong app thật, nhiều team dùng thư viện react-native-safe-area-context để xử lý linh hoạt hơn.
Nhóm 4: List, Form và User Input
27. Khi nào dùng ScrollView?
ScrollView phù hợp với nội dung ngắn hoặc số lượng item ít, vì nó render toàn bộ children. Nếu danh sách dài, nên dùng FlatList để tối ưu hơn.
28. FlatList dùng để làm gì?
FlatList dùng để hiển thị danh sách dữ liệu, đặc biệt là danh sách dài. Nó nhận data, renderItem, keyExtractor và hỗ trợ empty, header, footer, refresh.
29. keyExtractor trong FlatList để làm gì?
keyExtractor tạo key ổn định cho từng item, giúp React nhận diện item khi render lại. Nên dùng ID ổn định từ data thay vì index nếu danh sách có thể thay đổi thứ tự.
30. ListEmptyComponent là gì?
ListEmptyComponent là UI hiển thị khi data rỗng. Đây là cách tốt để tránh màn hình trắng và cho người dùng biết không có dữ liệu.
31. TextInput dùng như thế nào?
TextInput là component nhập liệu. Thường dùng theo dạng controlled input: value lấy từ state, còn onChangeText cập nhật state.
32. secureTextEntry dùng để làm gì?
secureTextEntry dùng cho ô mật khẩu để ẩn nội dung nhập. Khi làm password field, cũng nên cân nhắc nút hiện/ẩn mật khẩu nếu UX cần.
33. keyboardType dùng để làm gì?
keyboardType chọn kiểu bàn phím phù hợp, ví dụ email-address, numeric, phone-pad. Chọn đúng keyboard giúp người dùng nhập nhanh và ít lỗi hơn.
34. KeyboardAvoidingView giải quyết vấn đề gì?
KeyboardAvoidingView giúp layout tránh bị bàn phím che, đặc biệt trên iOS. Với form dài, thường cần kết hợp thêm scroll để người dùng nhập hết các field.
Nhóm 5: Navigation, API và dữ liệu
35. Navigation trong React Native thường dùng thư viện nào?
Thư viện phổ biến là React Navigation. Nó hỗ trợ stack, tab, drawer và nhiều pattern điều hướng quen thuộc trong app mobile.
36. Stack navigation là gì?
Stack navigation hoạt động như chồng màn hình. Khi mở detail, màn hình mới nằm trên màn hình cũ; khi back, nó quay lại màn hình trước đó.
37. Tab navigation dùng khi nào?
Tab navigation phù hợp cho các khu vực chính của app mà người dùng chuyển qua lại thường xuyên, như Home, Search, Saved, Profile. Không nên dùng tab cho các màn hình phụ quá sâu.
38. Params trong navigation là gì?
Params là dữ liệu truyền khi chuyển màn hình, ví dụ articleId từ list sang detail. Nên truyền dữ liệu gọn như ID, tránh truyền object quá lớn nếu không cần.
39. Gọi API trong React Native bằng gì?
Có thể dùng fetch có sẵn hoặc thư viện như Axios. Dù dùng cách nào, màn hình nên xử lý đủ loading, error, empty và success state.
40. Vì sao cần loading state?
Loading state cho người dùng biết app đang xử lý hoặc tải dữ liệu. Nếu không có loading, người dùng dễ tưởng app đứng hoặc không phản hồi.
41. Error state nên hiển thị thế nào?
Error state nên rõ ràng, thân thiện và nếu có thể nên có nút thử lại. Đừng chỉ log lỗi trong console rồi để màn hình trắng.
42. AsyncStorage dùng để làm gì?
AsyncStorage thường dùng để lưu dữ liệu nhỏ ở local như token, setting, onboarding flag. Không nên xem nó như database lớn hoặc nơi lưu dữ liệu nhạy cảm không mã hoá.
Nhóm 6: Debug, Performance và kiến thức đi làm
43. Làm sao debug React Native app?
Có thể dùng console log, React Native DevTools, debugger, Flipper tuỳ setup, log native từ Xcode/Android Studio. Fresher nên biết đọc lỗi đỏ trên màn hình và trace stack cơ bản.
44. Metro là gì?
Metro là JavaScript bundler của React Native. Nó bundle code JavaScript, xử lý module và phục vụ app trong quá trình development.
45. Hot reload hoặc Fast Refresh là gì?
Fast Refresh giúp cập nhật UI nhanh khi sửa code mà không cần build lại toàn bộ app. Nó giúp tăng tốc vòng lặp phát triển, nhưng đôi khi vẫn cần reload app khi state hoặc native module bị lệch.
46. Khi nào cần dùng useMemo hoặc useCallback?
Chỉ nên dùng khi có vấn đề render/performance thực tế hoặc khi cần giữ reference ổn định cho child component. Không nên thêm sớm chỉ vì nghĩ “tối ưu” là tốt.
47. memo trong React dùng để làm gì?
React.memo giúp component tránh render lại nếu props không đổi. Nó hữu ích với item trong list hoặc component nặng, nhưng cần đo hoặc có lý do rõ ràng trước khi dùng.
48. Vì sao list dài dễ bị lag?
List dài có thể lag nếu render item quá nặng, key không ổn định, ảnh quá lớn, hoặc mỗi lần state đổi làm quá nhiều item render lại. FlatList, memo hoá hợp lý và tối ưu ảnh sẽ giúp cải thiện.
49. Native module là gì?
Native module là phần code native viết bằng Swift/Objective-C hoặc Kotlin/Java để React Native gọi tới khi JavaScript không đủ khả năng xử lý một tính năng nào đó. Fresher chỉ cần hiểu khái niệm, chưa cần tự viết sâu.
50. Android và iOS có luôn giống nhau không?
Không. Cùng một code React Native nhưng hành vi keyboard, permission, font, shadow, status bar hoặc layout có thể khác giữa Android và iOS. Vì vậy cần test cả hai nền tảng nếu app target cả hai.
Nên ôn thêm gì trước buổi phỏng vấn?
Ngoài 50 câu hỏi/trả lời chính ở trên, bạn nên tự làm lại một app nhỏ có các phần sau: màn hình đăng nhập, danh sách bài viết bằng FlatList, màn hình chi tiết, form tìm kiếm, gọi API, loading/error/empty state và navigation. Khi phỏng vấn, có project thật để giải thích sẽ thuyết phục hơn rất nhiều so với chỉ trả lời lý thuyết.
Nguồn tham khảo: React Native Docs, Core Components and APIs, React Learn, React Navigation Docs.
