mediumWrong PatternsReact

The prop drill

A developer asked an AI assistant to make the current logged-in user's theme preference available to a deeply nested button component. The suggested code works, but every component between the top and the button now has to accept and forward a prop it never actually uses.

App.jsx

function App({ theme }) {
  return <Dashboard theme={theme} />;
}
function Dashboard({ theme }) {
  return <Sidebar theme={theme} />;
}
function Sidebar({ theme }) {
  return <UserMenu theme={theme} />;
}
function UserMenu({ theme }) {
  return <ThemeToggleButton theme={theme} />;
}

What's the actual maintainability problem with this pattern, beyond it looking repetitive?

Dashboard, Sidebar, and UserMenu each have to know about and forward a prop they never use themselves, coupling every intermediate component to a concern only the button actually cares about.

Passing the same prop name through multiple components causes React to throw a duplicate-prop warning.

Props can only be forwarded through a maximum of two component levels in React.

theme becomes stale after the second level because React only re-renders one level of prop changes.