# Phần 1 - React Best Practices > Nguồn: https://tiennhm.io.vn/docs/agent-skills/agent-skills-01-react-best-practices > Tổng hợp 53 guideline React best practices cho Agent Skills - State, Effects, Rendering, Components, Props, Events, Forms, Hooks, Context, Performance, Testing, Accessibility, TypeScript. > Tài liệu tổng hợp 53 guideline React best practices dùng làm nguồn tham chiếu cho Agent Skills (ví dụ trong Cursor), bao gồm State, Effects, Rendering, Components, Props, Events, Forms, Hooks, Context, Performance, Testing, Accessibility và TypeScript. Mỗi guideline được đánh giá mức độ quan trọng (Cao/Trung bình/Thấp) và có ví dụ code cụ thể về nên làm và không nên làm. Nội dung dựa trên bộ guideline từ ui-ux-pro-max-skill. Tài liệu này tổng hợp **React Best Practices** dùng làm nguồn tham chiếu cho Agent Skills (ví dụ trong Cursor). Nội dung dựa trên bộ guideline từ [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) — file [react.csv](https://raw.githubusercontent.com/nextlevelbuilder/ui-ux-pro-max-skill/refs/heads/main/src/ui-ux-pro-max/data/stacks/react.csv). **Cập nhật:** 08/02/2026. **Mức độ:** 🔴 Cao · 🟡 Trung bình · 🟢 Thấp **Ví dụ code:** `+` nên · `-` tránh --- ## 1. State ### 1.1 🟡 Use useState for local state Simple component state nên dùng hook `useState`. - **Nên:** `useState` cho form inputs, toggles, counters. ```diff + const [count, setCount] = useState(0); ``` - **Không nên:** Class components với `this.state`. ```diff - this.state = { count: 0 }; ``` 📖 [useState – React](https://react.dev/reference/react/useState) --- ### 1.2 🟡 Lift state up when needed Chia sẻ state giữa các component anh em bằng cách “lift state” lên component cha chung. - **Nên:** Đưa state dùng chung lên ancestor chung. ```diff + // Parent giữ state và truyền xuống ``` - **Không nên:** Prop drilling qua nhiều tầng. ```diff - // chuỗi props dài qua nhiều cấp ``` 📖 [Sharing state between components](https://react.dev/learn/sharing-state-between-components) --- ### 1.3 🟡 Use useReducer for complex state State phức tạp (nhiều trường con, logic cập nhật phức tạp) nên dùng reducer. - **Nên:** `useReducer` khi state có nhiều sub-values hoặc cập nhật cùng lúc. ```diff + useReducer with action types ``` - **Không nên:** Nhiều `useState` riêng lẻ cho các giá trị liên quan. ```diff - 5+ useState cập nhật cùng nhau ``` 📖 [useReducer – React](https://react.dev/reference/react/useReducer) --- ### 1.4 🔴 Avoid unnecessary state Ưu tiên **tính toán từ state hiện có** thay vì lưu giá trị dẫn xuất vào state. - **Nên:** Tính derived values trong lúc render. ```diff + const total = items.reduce(...); ``` - **Không nên:** Lưu giá trị có thể suy ra từ state khác. ```diff - const [total, setTotal] = useState(0); ``` 📖 [Choosing the state structure](https://react.dev/learn/choosing-the-state-structure) --- ### 1.5 🟡 Initialize state lazily Với initial state tốn kém tính toán, dùng dạng **hàm** để khởi tạo lazy. - **Nên:** `useState(() => computeExpensive())`. ```diff + useState(() => JSON.parse(data)); ``` - **Không nên:** `useState(computeExpensive())` (chạy mỗi lần render). ```diff - useState(JSON.parse(data)); ``` 📖 [Avoiding recreating the initial state](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state) --- ## 2. Effects ### 2.1 🔴 Clean up effects Subscription, timer, listener phải có cleanup trong `useEffect`. - **Nên:** Return cleanup function trong `useEffect`. ```diff + useEffect(() => { + sub(); + return unsub; + }, []); ``` - **Không nên:** Bỏ qua cleanup cho subscriptions/timers. ```diff - useEffect(() => { - subscribe(); - }, []); ``` 📖 [Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system) --- ### 2.2 🔴 Specify dependencies correctly Mọi giá trị **đọc trong effect** phải có trong mảng dependency. - **Nên:** Đưa đủ giá trị dùng trong effect vào deps. ```diff + // [value] khi dùng value trong effect + useEffect(() => { ... }, [value]); ``` - **Không nên:** `[]` nhưng vẫn dùng props/state trong effect. ```diff - // [] nhưng dùng props/state trong effect - useEffect(() => { ... }, []); ``` 📖 [Specifying reactive dependencies](https://react.dev/reference/react/useEffect#specifying-reactive-dependencies) --- ### 2.3 🔴 Avoid unnecessary effects Không dùng effect để “transform data” hay xử lý event thuần — làm trong render hoặc event handler. - **Nên:** Transform data khi render, xử lý event trực tiếp trong handler. ```diff + const filtered = items.filter(...); ``` - **Không nên:** `useEffect` cho derived state hoặc event handling. ```diff - useEffect(() => setFiltered(items.filter(...)), [items]); ``` 📖 [You might not need an Effect](https://react.dev/learn/you-might-not-need-an-effect) --- ### 2.4 🟡 Use refs for non-reactive values Giá trị không cần trigger re-render (interval ID, DOM ref, instance) nên dùng `useRef`. - **Nên:** `useRef` cho interval IDs, DOM elements. ```diff + const intervalRef = useRef(null); ``` - **Không nên:** `useState` cho giá trị không cần render. ```diff - const [intervalId, setIntervalId] = useState(); ``` 📖 [useRef – React](https://react.dev/reference/react/useRef) --- ## 3. Rendering ### 3.1 🔴 Use keys properly List động cần **key ổn định và unique** (ID), không dùng index khi thứ tự/thêm/xóa thay đổi. - **Nên:** Stable IDs làm key. ```diff + key={item.id} ``` - **Không nên:** Array index làm key cho list động. ```diff - key={index} ``` 📖 [Keeping list items in order with key](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) --- ### 3.2 🟡 Memoize expensive calculations Tính toán nặng nên bọc trong `useMemo` với dependency đúng. - **Nên:** `useMemo` cho filter/sort/transform tốn kém. ```diff + useMemo(() => expensive(), [deps]); ``` - **Không nên:** Gọi hàm nặng mỗi lần render không cần thiết. ```diff - const result = expensiveCalc(); ``` 📖 [useMemo – React](https://react.dev/reference/react/useMemo) --- ### 3.3 🟡 Memoize callbacks passed to children Handler truyền xuống component con (đặc biệt đã `memo`) nên dùng `useCallback` để tránh re-render không cần thiết. - **Nên:** `useCallback` cho handlers truyền vào children đã memo. ```diff + useCallback(() => {}, [deps]); ``` - **Không nên:** Tạo function mới mỗi lần render. ```diff - const handler = () => {}; ``` 📖 [useCallback – React](https://react.dev/reference/react/useCallback) --- ### 3.4 🟢 Use React.memo wisely Chỉ bọc component **render thường xuyên với props ổn định** bằng `memo`. - **Nên:** `memo` cho pure component với props ổn định. ```diff + memo(ExpensiveList); ``` - **Không nên:** `memo` mọi thứ hoặc component đơn giản không cần. ```diff - memo(SimpleButton); // cân nhắc cho component rất đơn giản ``` 📖 [React.memo – React](https://react.dev/reference/react/memo) --- ### 3.5 🟡 Avoid inline object/array creation in JSX Tránh tạo object/array mới ngay trong JSX (gây re-render con không cần thiết). Định nghĩa bên ngoài hoặc memoize. - **Nên:** Style/object định nghĩa ngoài component hoặc memo. ```diff +
``` - **Không nên:** Inline object trong props. ```diff -
``` --- ## 4. Components ### 4.1 🟡 Keep components small and focused Mỗi component nên có **một trách nhiệm** rõ ràng. - **Nên:** Một concern per component. - **Không nên:** Component lớn, làm nhiều việc. ```tsx ``` ```tsx // Tránh: với 500 dòng ``` --- ### 4.2 🟡 Use composition over inheritance Ưu tiên **composition** (children, props) thay vì kế thừa class. - **Nên:** `children` prop để linh hoạt cấu trúc. ```diff + {content} ``` - **Không nên:** Cây kế thừa sâu. ```diff - class SpecialCard extends Card ``` 📖 [Thinking in React](https://react.dev/learn/thinking-in-react) --- ### 4.3 🟢 Colocate related code Đặt component và hook liên quan gần nhau (cùng thư mục/feature). - **Nên:** File liên quan trong cùng directory. ```diff + components/User/UserCard.tsx ``` - **Không nên:** Cấu trúc phẳng với quá nhiều file tách rời. ```diff - components/UserCard.tsx + hooks/useUser.ts xa nhau ``` --- ### 4.4 🟢 Use fragments to avoid extra DOM Dùng `Fragment` hoặc `<>` khi cần nhóm nhiều phần tử mà không thêm node DOM. - **Nên:** `<>` để nhóm không thêm wrapper. ```diff + <>{items.map(...)} ``` - **Không nên:** Thêm `` chỉ để bọc. ```diff -
{items.map(...)}
``` 📖 [Fragment – React](https://react.dev/reference/react/Fragment) --- ## 5. Props ### 5.1 🟢 Destructure props Destructure props trong signature để code gọn và rõ. - **Nên:** Destructure trong tham số hàm. ```diff + function User({ name, age }) { ... } ``` - **Không nên:** Dùng `props.name`, `props.value` khắp nơi. ```diff - function User(props) { ... } ``` --- ### 5.2 🟢 Provide default props values Dùng default parameters hoặc `defaultProps` thay vì check `undefined` trong component. - **Nên:** Default trong destructuring. ```diff + function Button({ size = 'md' }) { ... } ``` - **Không nên:** `if (size === undefined) size = 'md'` nhiều chỗ. ```diff - if (size === undefined) size = 'md'; ``` --- ### 5.3 🟡 Avoid prop drilling Data cần truyền sâu nhiều tầng nên dùng **Context** hoặc **composition** thay vì truyền props qua 5+ cấp. - **Nên:** Context cho data global, composition cho UI. ```diff + ``` - **Không nên:** Truyền props qua nhiều tầng không dùng. ```diff - ``` 📖 [Passing data deeply with context](https://react.dev/learn/passing-data-deeply-with-context) --- ### 5.4 🟡 Validate props with TypeScript Dùng **TypeScript interface** cho props thay vì PropTypes hoặc không validate. - **Nên:** `interface Props { name: string; ... }`. ```diff + interface ButtonProps { + onClick: () => void; + } ``` - **Không nên:** `PropTypes` hoặc không có type. ```diff - Button.propTypes = { ... }; ``` --- ## 6. Events ### 6.1 🟢 Use synthetic events correctly Dùng event object chuẩn của React (đã normalize), không truy cập `nativeEvent` trừ khi cần. - **Nên:** `e.preventDefault()`, `e.stopPropagation()`. ```diff + onClick={(e) => e.preventDefault()} ``` - **Không nên:** Dùng `e.nativeEvent` khi không cần. ```diff - onClick={(e) => e.nativeEvent.preventDefault()} ``` 📖 [React event object](https://react.dev/reference/react-dom/components/common#react-event-object) --- ### 6.2 🟡 Avoid binding in render Trong function component dùng arrow function hoặc `useCallback`; tránh `.bind(this)` trong render. - **Nên:** Arrow function trong functional component. ```diff + const handleClick = () => {}; ``` - **Không nên:** `bind` trong render hoặc constructor. ```diff - this.handleClick.bind(this) ``` --- ### 6.3 🔴 Pass event handlers not call results Truyền **reference** hàm, không gọi hàm ngay (trừ khi handler trả về hàm). - **Nên:** `onClick={handleClick}`. ```diff + onClick={handleClick} ``` - **Không nên:** `onClick={handleClick()}` (gọi ngay mỗi lần render). ```diff - onClick={handleClick()} ``` --- ## 7. Forms ### 7.1 🟡 Controlled components for forms Form input nên **controlled**: `value` + `onChange` từ state. - **Nên:** `value` + `onChange` cho inputs. ```diff + ``` - **Không nên:** Uncontrolled với chỉ ref (trừ khi có lý do rõ). ```diff - ``` 📖 [Controlling an input with a state variable](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable) --- ### 7.2 🟡 Handle form submission properly Xử lý submit trong `onSubmit` của ``, gọi `preventDefault()` trong handler. - **Nên:** `onSubmit` với `preventDefault`. ```diff +
``` - **Không nên:** Chỉ `onClick` trên nút submit. ```diff -