Context and useContext

Part of the React course

Your app has a dark mode toggle. The toggle lives in the settings panel, but the thing that needs to know about it is a button eight components deep inside a table inside a card inside a page. To get the value from one to the other by props, every single component in between has to accept a theme prop it does not use and hand it straight on.

React has an official escape hatch for this, and the name for it is context: a value published at one point in the component tree that any component underneath can read directly, no matter how deep, without anyone in between passing it along. The image that fits is a radio broadcast. A station transmits on a frequency, and any receiver in range tunes in directly.