The State Placement Problem

The most common source of messy React code isn't missing libraries or wrong patterns — it's state living in the wrong place. When all your state sits at the top of the component tree, every child receives props it doesn't need ^1,9.

Why This Gets Messy

When all state lives in a single top-level component, every child below it receives props it doesn't need. State should live in the lowest component that actually needs it ^1,9. This is called prop drilling, and it makes code harder to read, harder to refactor, and slower to work with ^2,3.

When sidebar state, search filters, and sort order all live in the same top-level Dashboard component, you end up passing 8+ props through intermediate components that don't use any of them. This is prop drilling.

function Dashboard() {
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState("date");
  const [users] = useState(initialUsers);
  const [filtered, setFiltered] = useState([]);

  // ❌ syncing derived state with useEffect
  useEffect(() => {
    setFiltered(
      users.filter(u => u.name.includes(search))
    );
  }, [users, search]);

  return (
    <Layout
      sidebarOpen={sidebarOpen}
      setSidebarOpen={setSidebarOpen}
      search={search} setSearch={setSearch}
      sortBy={sortBy} setSortBy={setSortBy}
      users={filtered}
    />
  );
}

A Common Mistake

Many developers reach for Redux or Context as a first response to prop drilling. These tools have their place, but they add complexity and can mask the real problem: state that lives in the wrong component ^3,15. Before adding a library, ask whether the state can simply be moved closer to where it's used.