Context API, Custom Hooks, State Sharing, and Application Architecture

Why State Sharing Becomes Important

As a React app grows, not all state belongs in a single component. Theme settings, authentication, locale, shopping cart data, feature flags, and user preferences often need to be shared across many branches of the component tree.

Context API Basics

const ThemeContext = createContext('light');

Context lets a value be available to many nested components without passing props through every intermediate level. It is useful, but should be used thoughtfully rather than as a replacement for all state organization.

Custom Hooks for Reusable Logic

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

Custom hooks package reusable stateful logic in a clean, testable form. They are one of React’s most powerful architectural tools.

Architecture Guidance

Context is ideal for broadly shared, relatively stable app concerns. Local component state is best for local behavior. More formal state libraries may become useful when apps need advanced debugging, normalized data, or complex cross-feature updates. Choosing the simplest approach that fits is usually the healthiest path.

Business Example

An e-commerce site may share cart state, currency preferences, theme mode, and logged-in user details across many pages. Context and custom hooks can make such cross-app concerns much more manageable.