react-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

After editing several TSX/JSX files, run through this condensed checklist to catch common issues before they compound.

在编辑多个TSX/JSX文件后，通过这份精简的检查清单排查常见问题，防止问题扩大。

One component per file — colocate helpers only if they are private to that component
Named exports over default exports for better refactoring and tree-shaking
Props interface defined inline or colocated, not in a separate
```
types.ts
```
unless shared

Destructure props in the function signature:

function Card({ title, children }: CardProps)

Avoid barrel files (
```
index.ts
```
re-exports) in large projects — they hurt tree-shaking

在函数签名中解构Props：

function Card({ title, children }: CardProps)

Rules of Hooks — never call hooks conditionally or inside loops
Custom hooks — extract reusable logic into
```
use*
```
functions when two or more components share it
Dependency arrays — list every reactive value; lint with
```
react-hooks/exhaustive-deps
```
useCallback
/
useMemo
— use only when passing to memoized children or expensive computations, not by default
useEffect
cleanup — return a cleanup function for subscriptions, timers, and abort controllers

Colocate state — keep state as close as possible to where it is consumed
Derive, don't sync — compute values from existing state instead of adding
```
useEffect
```
to mirror state
Avoid prop drilling past 2–3 levels — use context or composition (render props / children)
Server state — use React Query, SWR, or Server Components instead of manual fetch-in-effect

Semantic HTML first — use
```
<button>
```
,
```
<a>
```
,
```
<nav>
```
,
```
<main>
```
, etc. before reaching for
```
<div onClick>
```
alt
on every
<img>
— decorative images get
```
alt=""
```
Keyboard navigation — interactive elements must be focusable and operable via keyboard
aria-*
attributes — only when native semantics are insufficient; don't redundantly label

React.memo
— wrap pure display components that re-render due to parent changes
Lazy loading — use
```
React.lazy
```
+
```
Suspense
```
for route-level code splitting
List keys — use stable, unique IDs; never use array index as key for reorderable lists
Avoid inline object/array literals in JSX props — they create new references every render
Image optimization — use
```
next/image
```
or responsive
```
srcSet
```
; avoid unoptimized
```
<img>
```
in Next.js

React.memo
— 包裹因父组件变化而重新渲染的纯展示组件
懒加载 — 使用
```
React.lazy
```
+
```
Suspense
```
实现路由级代码分割
列表Key — 使用稳定、唯一的ID；对于可重新排序的列表，永远不要使用数组索引作为Key
避免在JSX属性中使用内联对象/数组字面量 — 每次渲染都会创建新的引用
图片优化 — 使用
```
next/image
```
或响应式
```
srcSet
```
；在Next.js中避免使用未优化的
```
<img>
```

React.FC
is optional — prefer plain function declarations with explicit return types
PropsWithChildren
— use when the component accepts
```
children
```
but has no other custom props
Event handlers — type as
```
React.MouseEvent<HTMLButtonElement>
```
, not
```
any
```

Generics for reusable components — e.g.,

function List<T>({ items, renderItem }: ListProps<T>)

as const
for config objects — ensures literal types for discriminated unions and enums

可复用组件的泛型 — 例如：

function List<T>({ items, renderItem }: ListProps<T>)