Frontend · JavaScript

React Context and Custom Hooks Fix Props Drilling with a One-Line Call

By 橘子星 · Aug 7, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Props drilling is one of the first pain points new React developers hit, and the Context + custom Hook pattern is the standard escape hatch. Understanding it unlocks cleaner component trees and prepares a codebase for state management migrations, since swapping the Hook's internals from Context to Redux or Zustand requires no component changes.

Summary

Passing props through multiple component layers that don't need the data creates brittle, noisy code. React Context replaces that chain with a Provider that injects data and a useContext call that retrieves it from any depth, skipping every intermediate component. The pattern becomes cleaner when useContext is wrapped inside a custom Hook like useTheme, which isolates the Context import and gives the component a semantic, one-line API. A second demo, useMouse, shows the same encapsulation principle applied to side-effect logic: useState tracks coordinates, useEffect subscribes to mousemove, and the cleanup function unsubscribes on unmount, all hidden behind a single const { x, y } = useMouse() call. Together, Context and custom Hooks separate data plumbing from UI rendering, so components only declare what they consume.

Takeaways

— createContext builds the pipeline, Provider injects data into a subtree, and useContext reads it from any nested component without intermediate props.

— Provider does not need to wrap the entire app; it scopes data sharing to whichever component subtree it encloses.

— Wrapping useContext in a custom Hook like useTheme decouples components from the specific Context object and makes future state-management swaps a single-file change.

— Custom Hooks package useState, useEffect, and cleanup logic into a black box that callers consume with one line, as useMouse does for mouse-coordinate tracking.

— useEffect subscriptions must return a cleanup function that removes event listeners, preventing memory leaks when the component unmounts.

Conclusions

The article's useTheme Hook is a thin wrapper around useContext, but its real value is architectural: it turns a React API detail into a domain-specific verb that survives refactors.

useMouse demonstrates that custom Hooks are not just for state but for bundling an entire lifecycle — subscribe, update, unsubscribe — into a single import, which is the same mental model behind most third-party React libraries.

Concepts & terms

Props drilling

Passing data from a parent component to a deeply nested child by threading props through every intermediate component, even when those intermediates don't use the data.

React Context

A built-in React API (createContext, Provider, useContext) that creates a data pipeline so any component within a Provider's subtree can read shared values without props.

Custom Hook

A JavaScript function whose name starts with 'use' that can call React built-in Hooks internally, allowing reusable stateful logic to be extracted and shared across components.

useEffect cleanup function

The function returned from a useEffect callback, which React calls when a component unmounts or before re-running the effect, used here to remove event listeners and avoid memory leaks.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗