Replace prop drilling with React Context for shared state

The theme setting has to pass through four components that never even use it.

IntermediateRead 4 minDoing: an hour or two6 steps

▶ Start

What you'll have at the end

A shared value read directly by three components with no props passed between them

Before you start

You need

A React app where a theme flag lives in one top-level component and reaches three real readers, a nav item at the end of a chain plus two components sitting right beside the top level, only by being threaded as a prop through several components in between that never read it themselves.

Not covered

Choosing between Context and a dedicated state library for a value that changes on every keystroke or needs to log every past change; this covers a value that changes rarely and has only a few real readers.

Leans on

Give the shared value one real home

Create the context and its safe hook
Build a provider that owns the state

Cut the prop out of the chain

Mount it once and delete the drilled prop
Call the hook at each real consumer

Make it cheap and prove it works

Memoize the value between renders
Confirm no prop threads the tree

Where to go next

Move shared state out of a pile of Context providers

once several unrelated values each get their own context and the app is nesting provider after provider, that's the point to flatten them instead of adding a fourth.

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook