5 React patterns I use in production

After building several apps in the ecosystem, these are the React patterns I repeat the most. Nothing exotic — things that scale and don't betray me three months later.

1. Custom hooks for logic, not for everything

One hook per concern. If a hook does three things, that's three hooks.

function useDebouncedValue<T>(value: T, ms = 300): T {
  const [v, setV] = useState(value)
  useEffect(() => {
    const id = setTimeout(() => setV(value), ms)
    return () => clearTimeout(id)
  }, [value, ms])
  return v
}

2. Derived state, not duplicated

If you can compute it, don't store it in state. Fewer useState, fewer sync bugs.

3. Dumb components + containers

The UI shouldn't know where the data comes from. That makes wiring up a CMS or an API later trivial.

4. Zustand for lightweight global state

Redux is a lot for most apps. Zustand gives 90% with 10% of the ceremony.

5. Suspense + lazy for the weight

Lazy loading per route and per heavy component. The first render has to fly.

None are magic. Together they make today's code kind to future me.