React Dos and Don'ts

Do This, Not That

Modern React favors function components, hooks, declarative data fetching, and measured optimization. Legacy patterns — class components, CRA, manual fetch effects everywhere — are don'ts for new work.

// DO: functional update
setCount(c => c + 1);

// DON'T: mutate state
state.items.push(item);

Immutable updates are non-negotiable in React state.

Quick Dos and Don'ts List

DO: use Vite, TypeScript, TanStack Query
DO: colocate state, use keys from data
DO: eslint-plugin-react-hooks

DON'T: CRA for new apps, mutate state
DON'T: fetch in render, index keys for dynamic lists
DON'T: skip loading/error UI states

• Do use semantic HTML and keyboard support.
• Don't store derived data in state.
• Do abort fetch on unmount.
• Don't optimize without profiling.

Dos and Don'ts Table

Side-by-side guidance.

Effects Dos and Don'ts

Do use effects for sync with external systems. Don't use effects to transform props to state. Don't use effects for user event responses.

• DO: subscribe/unsubscribe with cleanup.
• DO: abort fetch in effect cleanup.
• DON'T: setState chain causing infinite loops.
• DON'T: copy props into state without reason.

Global State Dos and Don'ts

Do start local. Do use Query for server cache. Don't put everything in Redux on day one. Don't duplicate API data in Zustand.

Common Mistakes

• Treating don'ts as never — legacy maintenance may require exceptions.
• Following don'ts from outdated 2018 tutorials.
• Dogmatic dos without context.
• Ignoring project-specific constraints.

Key Takeaways

• Embrace hooks, Vite, TypeScript, and TanStack Query.
• Avoid mutation, fetch-in-render, and premature global state.
• Use as code review checklist.
• Context matters — dos/don'ts guide, not absolute law.