react-tips

10 React Tips That Actually Matter

Use these patterns when writing or reviewing React code. Each one prevents real bugs or eliminates unnecessary complexity.

1. Use useReducer When State Is Related

When multiple useState values depend on each other (loading + error + data), use useReducer instead. Prevents impossible state combinations where your UI lies to the user.

// BAD: Three setters you can forget to coordinate
setIsLoading(false);
setError(null);
setPost(data);

// GOOD: One dispatch, one guaranteed valid state
dispatch({ type: 'FETCH_SUCCESS', payload: data });

When to apply: Any time changing one piece of state requires changing another.

2. useTransition Over Debounce

For search inputs and heavy filtering, use useTransition instead of debounce. It marks state updates as non-urgent so React can keep the UI responsive.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setFilteredItems(filterItems(query));
});

When to apply: Any input that triggers expensive re-renders (search, filters, large lists).

3. State Colocation

Move state as close as possible to where it's consumed. If only SearchBox and SearchResults need searchTerm, wrap them in a SearchFeature component that owns the state. Siblings won't re-render.

When to apply: Before reaching for React.memo, check if the state can just be moved down the tree.

4. useEffect Is Synchronization, Not Lifecycle

useEffect is NOT componentDidMount. It's "run this when these dependencies change." Don't use it for data fetching (use React Query/SWR). Don't put functions inside unless necessary. Extract logic out of the effect body.

When to apply: Any time you're writing a useEffect, ask: "Am I synchronizing with something external, or am I triggering logic?" If the latter, there's probably a better pattern.

5. Never Use Index as Key

key={index} causes state to stick to the wrong DOM nodes when items are added, removed, or reordered. Always use a stable, unique ID from your data (key={item.id}).