Ôn tập NEXJS/REACT Flashcards
(150 cards)
1
Q
- Sự khác biệt giữa var, let, const?
- The diffirence between var, let, const ?
A
+ var: function scope, hoisting
+ let/const: block scope
2
Q
What is hoisting?
A
- Elevate functions and variables declarations to the “top scope” . This allows you to use a function or a variable before it is defined in your .js file.
- Đưa phần khai báo lên đầu scope, nhưng không đưa giá trị. Cho phép bạn sử dụng func or biến trước khi nó được khai báo trong file js
3
Q
“this” trong arrow function khác gì general function?
A
Arrow function không có “this” riêng, dùng “this” của lexical scope
4
Q
What is closure?
A
Closure là hàm có thể “nhớ” biến ở scope bên ngoài (scope cha) khi được gọi sau này ( tức là khi scope cha đã thực thi xong)
5
Q
== và === khác nhau như nào?
A
== so sánh ép kiểu (type coercion)
=== so sánh giá trị và kiểu dữ kiểu
6
Q
what is event loop?
A
Cơ chế xử lý async bằng cách đưa callback vào queue, hay nói cách khác là cơ chế giúp JS có thể thực hiện nhiều thao tác cùng 1 lúc ( concurrent modal)
7
Q
Microtask vs Macrotask?
A
Microtask ( Promise) chạy truớc macrotask (setTimeout)
8
Q
setTimeout(fn, 0) và promise.resolve().then(fn) cái nào chạy trước
A
Promise.then() chạy trước
9
Q
Cách xử lý lỗi trong ascync/await?
A
Dùng try /catch hoặc catch() với promise
10
Q
Tác dụng của promise.all() ?
A
Chạy nhiều promise song song, trả về khi tất cả thành công
11
Q
Array/Object handling
- Sự khác nhau giữa shallow clone và deep clone
A
- Shallow clone sao chép 1 tầng, deep clone sao chép toàn bộ cấu trúc
12
Q
- Dùng phương pháp nào để deep clone?
A
- structureClone() hoặc JSON.parse(JSON.stringify(obj)
13
Q
Viết ví dụ dùng reduce() tính tổng
A
arr.reduce((a, b) => a + b)
14
Q
Spread and rest operator khác nhau như nào?
A
Spead: mở rộng
Rest: gom nhiều tham số
15
Q
?. trong JS là gì
A
Optional chaining, tránh lỗi khi truy cập nested object
16
Q
OOP & Functional
- What is protype?
A
- Cơ chế kế thừa qua chuỗi prototype trong JS
17
Q
Pure functinon là gì
A
Không side effect, cùng input => cùng output
18
Q
What is Higher-Order- function (HOC)?
A
Hàm mà nó nhận/trả ra 1 hàm khác
19
Q
What is Curry function?
A
Hàm chia nhỏ nhiều tham số thành nhiều hàm đơn
20
Q
Lợi ích của tính bất biến (immutability) ?
A
Tránh bug, dễ debug, giúp react dễ tối ưu
21
Q
Module & Tooling
- The difference between CommonJS and ESM
A
- Commón dùng require còn ESM dùng import/export
22
Q
Tree shaking là gì?
A
Loại bỏ code không dùng khi bundle
23
Q
Cách export default và expỏt named
A
export default fn vs export { fn }
24
Q
Why we should devide small modal?
A
Dễ bảo trì, test, tái sử dụng
25
Tại sao không dùng bundle như Vite/Webpack
Dễ đóng gói code, tối ưu hiệu suất khi deploy
26
#React Fundamental
- Props khác gì state
- Props là dữ liệu từ component cha, state là dữ liệu nội bộ của 1 component
27
Controlled vs Uncontrolled component
- Controlled: input gắn với state
- Uncontrolled: dùng ref truy cập DOM
28
JSX là gì?
Cú phps mô tả UI giống HTML nhưng thực chất là JS
29
Tại sao không nên mustate state trực tiếp?
- Mustate state trực tiếp là thay đổi giá trị của state 1 cách trực tiếp mà không qua các phương pháp chính thống như setState hoặc hàm setter trong useState
- Gây bug và khiến react không render lại đúng
30
Key trong list dùng để làm gì?
Giúp React nhận diện các phần tử để tối ưu render
31
#React Lifecycle & Hooks
- UseEffect chạy khi nào?
- Sau mỗi lần render ( nếu không truyền deps) hoặc khi deps thay đổi
32
useLayoutEffect khác useEffect như nào?
useLayoutEffect chạy trước browser vẽ UI, useEffect chạy sau
33
useCallback dùng để làm gì
Trả về function đã được memo để tránh re-render không cần thiết
34
custom hook là gì
Hook tự định nghĩa, giúp tái sử dụng logic giữa nhiều component
Tổ chức theo “hook factory” hoặc “logic buckets”
35
dùng useRef làm gì?
Lưu giá trị không trigger re-render, hoặc tham chiếu tới DOM
36
#Performance Optimization
- React.memo dùng để làm gì?
Memo hóa component, tránh rendẻ lại nếu props không đổi
37
useMemo khác gì useCallback?
useMemo memo kết quả, useCallback memo function
38
khi nào cần dùng lazy loading
khi component lớn hoặc không cần thiết phải tải ngay
39
Suspense dùng trong trường hợp nào?
Hiển thị fallback UI khi đang loading (lazy component, data...)
40
Tại sao không nên update state liên tục trong loop
Gây nhiều lần re-render không cần thiết
41
State management (Redux/Context)
- Context API dùng cho trường hợp nào
- Khi muốn truyền dữ liệu qua nhiều tầng component mà không prop drilling
42
Redux Toolkit có gì nổi bật?
Tối ưu boilerplate, hỗ trợ async logic qua createAsyncThunk
43
createSlice trong Redux Toolkit là gì?
Tạo reducer + action nhanh gọn trong 1 nơi
44
useReducer nên dùng khi nào?
Khi state phức tạp, có nhiều hành động tác động lên
45
Redux hoạt động theo pattern gì?
Flux: Action => Reducer => Store => UI
46
#Routing and Form
- Route động (dynamic routing) là gì?
- Route có các tham số như /user/:id
47
useNavigate trong React Router dùng để làm gì?
Chuyển hướng route bằng code
48
controlled form có ưu điểm gì?
Dễ quản lý dữ liệu & validate
49
useParams dùng để làm gì?
Lấy giá trị param từ URL
50
Nested routes là gì?
Route lồng trong route cha, giúp chia layout rõ ràng
51
#Testing
- Unit test khác intergration test như thế nào
- Unit test thì kiểm tra 1 phần nhỏ riêng lẻ, intergration test thì kiểm trả nhiều phần kết hợp
52
React testing library ưu tiên điều gì?
Test từ góc nhìn người dùng (user-centric)
53
Mock API call trong test như thế nào?
dùng jest.fn(), msw hoặc axios-mock-adapter
54
Snapshot test là gì?
So sánh cấu trúc UI hiện tại với bản snáphot đã lưu
55
fireEvent dùng để làm gì?
Giả lập hành động của người dùng ( click, input, mouseover..)
56
#Behaviour Interview
- Một lần bạn không đồng ý vơí team, bạn sẽ xử lý ra sao?
- Lắng nghe, phân tích lý do, đưa ra bằng chứng và hướng compromise
57
làm sao bạn quản lý thời gian khi nhiều task?
Ưu tiên theo mức độ khẩn cấp & impact, thường dùng kanban/Todo
58
Khi gặp bug production, bạn phản ứng như thế nào?
Giữ bình tĩnh, rollback nếu cần, log lại root cause
59
Bạn mentor junior như thế nào?
Pair programming, code review kĩ, đặt câu hỏi gợi mở tư duy
60
Làm sao bạn đảm bảo chất lượng code team
Code inventino, lint, CI/CD, test, review nghiêm túc
61
#Desgin pattern & Architecture
- Singleton pattern là gì
- Chỉ cho phép tạo 1 instance duy nhất của class
62
- Observerse pattern ứng dụng trong JS ở đâu
- Event system hoặc state management
63
SOLID principles là gì?
5 nguyên lý thiết kế hướng đối tượng:
- Single responsibility principle (SRP): 1 class chỉ nên giữ 1 trách nhiệm duy nhất
- Open/Close principle (OCP): thoải mái mở rộng 1 class nhưng không được sửa đối tượng bên trong class đó
- Liskov substution principle (LSP): bất cứ instance nào của class cha cũng có thể được thay thế bởi instance của class con mà không làm thay đổi tính đúng đắn của chương trình
- Interface segregation principle (ISP): thay vì dùng 1 interface lớn, ta nên tách thành nhiền inter nhỏ với mục đích cụ thể
- Dependency segregation principle (ISP): các module cấp cao không nên phụ thuộc vào module cấp thấp, cả 2 nên phụ thuộc vào abstraction.
64
Khi nào nên sử dụng Stagtegy pattern?
Khi có nhiều thuật toán thay thế cho nhau
65
Ưu điểm của kiến trúc component-based?
Dễ tái sử dụng, test, mở rộng và bảo trì
66
Virtual DOM là gì?
EN: A lightweight copy of the real DOM used to optimize rendering performance.
VI: Bản sao nhẹ của DOM thật, giúp tối ưu hiệu suất render.
67
Real DOM
DOM thật
Cấu trúc giao diện thật do trình duyệt render.
68
Diffing
So sánh khác biệt
Quá trình so sánh V-DOM cũ và mới để tìm điểm khác biệt.
69
Reconciliation
Hòa giải DOM
Quá trình cập nhật DOM thật dựa trên kết quả diffing.
70
71
Declarative UI
Giao diện kiểu khai báo
Mô tả kết quả mong muốn thay vì cách thực hiện.
72
Imperative code
Mã lệnh tường minh
Lập trình bằng cách mô tả từng bước thay đổi UI.
73
Component Lifecycle
EN: Different phases in a component's existence: mounting, updating, and unmounting.
VI: Các giai đoạn trong vòng đời component: khởi tạo, cập nhật và huỷ bỏ.
74
Functional vs Class Components
EN: Functional components are simpler and support hooks; class components use lifecycle methods.
VI: Functional component đơn giản hơn và hỗ trợ hooks; class component sử dụng các phương thức vòng đời.
75
Hooks
EN: Functions that let you use state and other React features in functional components.
VI: Các hàm cho phép dùng state và tính năng React trong functional component.
76
Presentational vs Container Components
EN: Presentational components focus on UI; container components manage logic and data.
VI: Presentational component tập trung vào giao diện; container component xử lý logic và dữ liệu.
77
Higher-Order Component (HOC)
EN: A function that takes a component and returns a new enhanced component.
VI: Hàm nhận vào một component và trả về một component mới có thêm chức năng.
78
Render Props
EN: A technique for sharing code using a prop whose value is a function.
VI: Kỹ thuật chia sẻ logic bằng cách truyền một prop là hàm render.
79
Custom Hooks
EN: Reusable functions built on top of React's hooks to abstract logic.
VI: Các hàm dùng lại được, xây dựng dựa trên hook gốc để tái sử dụng logic.
80
List Rendering
Duyệt danh sách với map()
81
Event Handling
Xử lý sự kiện (onClick, onChange, onBlure, ...)
82
useContext
Quản lý state chia sẻ toàn cục giữa các component
83
useReducer
Thay thế useState cho logic phức tạp (giống Redux)
84
Memoization (React.memo, useMemo, useCallback)
Tối ưu hiệu suất render
85
Custom Hooks
Viết Hook riêng để tái sử dụng logic
86
Refs (useRef)
Truy cập trực tiếp DOM hoặc giữ giá trị không trigger re-render
87
ForwardRef
Truyền ref từ cha xuống con
88
Error Boundaries
Bắt lỗi khi render component
89
Portals
Render UI ra ngoài cây DOM cha
90
Fragments
Tránh thêm thẻ div không cần thiết
91
Suspense & lazy()
- Lazy load component (tách bundle)
- Suspense là một component tích hợp sẵn trong React dùng để "chờ" dữ liệu hoặc component load xong trước khi render ra màn hình
92
NEXT.JS: Pages vs App Router
Cấu trúc thư mục dựa trên pages/ hoặc app/
93
NEXT.JS: Routing
Điều hướng giữa các trang qua next/router hoặc Link
94
NEXT.JS: Static Generation (SSG)
Render HTML tại build time
95
NEXT.JS: Server-Side Rendering (SSR)
Render HTML tại mỗi request
96
NEXT.JS: Client-Side Rendering (CSR)
Render dữ liệu sau khi tải trang
97
NEXT.JS: getStaticProps, getServerSideProps
Hàm Next.js để fetch data
98
#NEXT.JS: API Routes
Tạo API backend trong Next.js (pages/api)
99
#NEXT.JS: Head
SEO với next/head
100
#NEXT.JS:Middleware
Xử lý request trước khi vào route
101
#NEXT.JS: Dynamic Routes, Catch-all Routes
Tạo route động với [slug].js, [...params].js
102
React Server Components (RSC)
Chạy component phía server, không cần gửi JS đến client
103
Streaming SSR / Partial Hydration
Hiển thị một phần UI trước khi tải xong tất cả
104
Incremental Static Regeneration (ISR)
Update trang SSG mà không cần rebuild toàn bộ site
105
Concurrent Mode (trong React 18+)
Cải thiện trải nghiệm UI khi render song song
106
Suspense for Data Fetching
Kết hợp với React 18 để loading tốt hơn
107
Hydration, Rehydration
Kết nối giữa HTML phía server và React phía client
108
useTransition
Ưu tiên update giao diện mượt hơn
109
Edge Functions
Serverless function chạy tại edge (tốc độ cao hơn)
110
Turbopack
Trình bundler mới, thay thế Webpack
111
forwardRef
#forwardRef: là HOC cho phép truyền ref từ comp cha sang con - đặc biệt là con dạng func component (k tự nhận ref như class component)
- cho phép truyền ref từ cha vào func component con
112
useImperativeHandle
useImperativeHandle(ref, createHandle) cho phép bạn tùy chỉnh những gì component cha có thể truy cập được qua ref. Thay vì expose toàn bộ DOM node/component, bạn expose một API riêng tùy ý.
- Tùy chỉnh API mà comp cha có thể gọi thông qua ref ( customize the exposed instance of a ref)
113
ref (reference)
trong React dùng để tham chiếu đến một phần tử DOM hoặc một component (khác)– cho phép bạn thao tác trực tiếp với nó (imperatively), ví dụ như focus, scroll, get value,...
114
useRef: (React Hook)
English: use in Function Component
useRef is a Hook that returns a mutable ref object which persists for the full lifetime of the component.
Vietnamese:
useRef là một Hook trả về một object có thể thay đổi (.current) và tồn tại xuyên suốt vòng đời của Function Component.
115
createRef - use in Class Component
English:
createRef creates a new ref on every render. It's mainly used in class components.
Vietnamese:
createRef tạo một ref mới mỗi lần render, chủ yếu được dùng trong class component.
116
Component Design Patterns
Presentational vs Container Component
Compound Component Pattern
Controlled vs Uncontrolled Component
Higher-Order Components (HOC)
Render Props
Slots pattern với props.children
117
State Management Strategy
Lifting state up
Prop drilling vs Context API
Global state: Redux / Zustand / Recoil
Server state: React Query / SWR
118
Optimize perfomance
- Tránh render không cần thiết (React.memo, useMemo, useCallback)
- Debounce/throttle trong React
- Lazy loading component (React.lazy, Suspense)
- Code splitting (Webpack + dynamic import())
- Virtualization (react-window, react-virtualized)
119
ROUTING & FORM
React Router (v6+)
Form Handling
120
React Router (v6+)
-Nested Routes
-Dynamic Route Params
-useNavigate, useLocation, useParams
-Route Guard & Redirect
121
Form Handling
Controlled vs Uncontrolled Components
Libraries: React Hook Form, Formik
Validation: Yup, Zod, custom validation
122
Testing React
Unit Test với Jest
Component Test với React Testing Library
Mock API Calls, Test Hook, Snapshot Test
123
NÂNG CAO (Advanced)
- React 18 features: Automatic Batching, startTransition, useDeferredValue
- Concurrent Rendering
- React Server Components (RSC)
- Hydration, SSR vs CSR vs SSG (với Next.js)
- Suspense cho data fetching
- Error Boundary
124
KỸ NĂNG KHÁC BỔ TRỢ
TypeScript trong React: typing props, state, hooks, HOC
Accessibility (a11y): aria-label, keyboard navigation
UX / UI Best Practices
Clean Code trong React (folder structure, naming, logic separation)
Performance monitoring (Lighthouse, DevTools Profiler)
125
Core React
JSX
Virtual DOM
Reconciliation
Component Lifecycle
Functional vs Class Components
Hooks:
useState, useEffect, useRef, useMemo, useCallback
useContext, useReducer, useLayoutEffect, useImperativeHandle
126
Component Architecture
Presentational vs Container Components
Higher-Order Components (HOC)
Render Props
Compound Components
Custom Hooks
127
State Management
Lifting State Up
Prop Drilling
Context API
Redux / Zustand / Recoil / Jotai (tuỳ bạn dùng gì)
Global vs Local State
Server State (React Query, SWR)
128
Performance Optimization
Memoization (React.memo, useMemo, useCallback)
Lazy Loading (React.lazy, Suspense)
Code Splitting
Virtualization (react-window, react-virtualized)
Avoiding Unnecessary Rerenders
129
React Router
react-router-dom: useNavigate, useParams, Outlet, Routes, Route, Link
Nested Routing
Route Guards / Redirects
130
React and TypeScript
Typing Props, State, Refs, Context, Custom Hooks
Generic Components / HOC with TypeScript
Discriminated Unions
131
Next-Level Topics
React Server Components (RSC)
Concurrent Mode (experimental)
React 18 Features (automatic batching, transitions)
Next.js Integration (nếu bạn dùng Next)
132
Accessibility (a11y) & UX
Semantic HTML in JSX
Keyboard navigation
ARIA attributes
133
TypeScript with React
EN: Adds type safety and better developer experience in React apps.
VI: Giúp đảm bảo kiểu dữ liệu và trải nghiệm lập trình tốt hơn trong React.
134
React Server Components (RSC)
EN: Components that render on the server to improve performance and reduce bundle size.
VI: Component được render từ phía server để cải thiện hiệu suất và giảm kích thước bundle.
135
Concurrent Mode
EN: Enables React to prepare multiple UI versions in parallel.
VI: Giúp React xử lý nhiều phiên bản giao diện song song (đang thử nghiệm).
136
Accessibility (a11y)
EN: Building interfaces usable by everyone, including people with disabilities.
VI: Thiết kế giao diện có thể sử dụng bởi mọi người, kể cả người khuyết tật.
137
React Hook Form / Formik
EN: Libraries to simplify form state management and validation.
VI: Thư viện giúp quản lý state và xác thực form dễ dàng hơn.
138
Jest / React Testing Library
EN: Tools for unit and integration testing React components.
VI: Công cụ dùng để test đơn vị và tích hợp cho React.
139
React.memo / useMemo / useCallback
EN: Optimization techniques to avoid unnecessary rendering.
VI: Kỹ thuật tối ưu để tránh render không cần thiết.
140
Redux / Zustand / Recoil
EN: Libraries for managing global state across the app.
VI: Thư viện để quản lý state toàn cục trong ứng dụng.
141
useState / useEffect / useRef / useMemo / useCallback
EN: React built-in hooks for state, lifecycle, referencing DOM, and optimization.
VI: Các hook tích hợp sẵn để quản lý state, vòng đời, truy cập DOM và tối ưu hiệu suất.
142
Context API
EN: A way to share state globally without prop drilling.
VI: Cách chia sẻ dữ liệu toàn cục mà không cần truyền props qua nhiều tầng.
143
Prop Drilling
EN: Passing props through many layers of components to reach a deep child.
VI: Truyền props qua nhiều tầng component để đến được component con sâu bên dưới.
144
Lifting State Up
EN: Moving state to a common parent component to share it among children.
VI: Di chuyển state lên component cha để chia sẻ giữa các component con.
145
File-based Routing
Hệ thống routing tự động dựa theo file
146
Server Actions
Thực hiện logic server trực tiếp từ client (Next 14)
147
Edge Functions
Chạy hàm ở edge (CDN gần user nhất)
148
Streaming + Suspense
Phân mảnh hiển thị từng phần UI
149
Middleware Matching
Matching route conditions (like /dashboard/(.*))
150
Internationalization (i18n)
Hỗ trợ đa ngôn ngữ với cấu hình router
