React at Scale: A Few Rules That Keep Codebases Healthy

Most React advice is generic. In real products, the wins are boring: clear boundaries and predictable data flow.

1) Keep components dumb, move logic into hooks

This keeps UI easy to read and logic easy to test.

export function useUsers() {
  return useQuery({
    queryKey: ["users"],
    queryFn: () => api.users.list(),
    staleTime: 30_000,
  })
}

export function UsersList() {
  const { data, isLoading } = useUsers()
  if (isLoading) return <Spinner />
  return <List items={data ?? []} />
}

2) Treat boundaries like a feature

What I aim for:

3) Prefer fewer patterns, used consistently

Consistency beats cleverness. If a new engineer can predict where code lives, you move faster.

4) Measure what matters