How does useContext help avoid prop drilling? What are the best practices for structuring your contexts?

Question

Accepted Answer

Prop drilling is the problem of passing props through multiple levels of components that do not need them, just to reach a deeply nested child. useContext solves this by allowing components to access shared data directly. The prop drilling problem looks like this. // Without Context: props pass through all levels function App() { const [user, setUser] = useState({ name: 'Alice' }); return

; } function Header({ user }) { return ; } function Navigation({ user }) { return ; // Finally used here! } The solution with useContext is as follows. // Create the context const UserContext = createContext(null); // Provider at the top level function App() { const [user, setUser] = useState({ name: 'Alice' }); return (

); } // Intermediate components no longer need the props function Header() { return ; } function Navigation() { return ; } // Consume directly where needed function UserMenu() { const { user, setUser } = useContext(UserContext); return Hello, {user.name}; } Best practices for structuring contexts are as follows. First, separate contexts by domain. // Bad: one giant context const AppContext = createContext({ user, theme, cart, notifications }); // Good: separated contexts const UserContext = createContext(null); const ThemeContext = createContext(null); const CartContext = createContext(null); Second, create custom hooks. function useUser() { const context = useContext(UserContext); if (context === null) { throw new Error('useUser must be used within a UserProvider'); } return context; } Third, separate stable values from values that change. // If dispatch never changes, separate it const UserStateContext = createContext(null); const UserDispatchContext = createContext(null); function UserProvider({ children }) { const [state, dispatch] = useReducer(userReducer, initialState); return ( {children} ); } Be careful about re-renders. All consumers of a context re-render when its value changes. To avoid unnecessary re-renders, do not put too much in a single context.