Prop drilling and the Context API

Model answer. Prop drilling is passing a value through several layers of components that do not use it themselves, only so a deeply nested child can receive it. It makes components noisy and tightly coupled, and refactoring painful.

Context lets a component provide a value that any descendant can read directly:

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Layout />
    </ThemeContext.Provider>
  );
}

function SaveButton() {
  const theme = useContext(ThemeContext);    // no props passed through Layout
  return <button className={`btn-${theme}`}>Save</button>;
}

Trade-off: every component that reads a context re-renders when its value changes. A provider with a big object that changes often (value={{ user, cart, setCart }}, re-created each render) can cause many unnecessary renders.

Mitigations: split contexts by concern (theme, auth, cart); memoise the value with useMemo; keep fast-changing data out of context, or use a store library (Redux Toolkit, Zustand) with selectors. Context suits values that change rarely: theme, locale, the signed-in user.