Understanding React Context

React Context lets parent components make information available to any component underneath them without passing props explicitly. The official documentation explains that context can replace repetitive prop passing and helps avoid what is called "prop drilling".

Steps to use Context

1. Create a context with createContext.
2. Use that context from components that need the data using useContext.
3. Provide that context from a parent component using the <Provider> component.

An excerpt from React's guide shows how context lets a parent provide data to distant children:

You can't do it with props alone. This is where context comes into play. You will do it in three steps:

1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.)
2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.)
3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.)
   Context lets a parent--even a distant one!--provide some data to the entire tree inside of it.

A simple example using a theme context:

// ThemeContext.js
import { createContext } from 'react'
export const ThemeContext = createContext('light')

// App.js
import { useContext } from 'react'
import { ThemeContext } from './ThemeContext'

function Toolbar() {
  const theme = useContext(ThemeContext)
  return <div className={theme}>Toolbar</div>
}

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  )
}

Caveats when using Context

According to the useContext documentation:

• The <Context> provider must be above the component doing the useContext() call.
• React automatically re-renders all children that use a context whenever the provider receives a different value.
• Context only works if the SomeContext used to provide and read the value are exactly the same object.

These caveats imply that frequent context updates can cause many components to re-render, so context is best for infrequently changing global data like locale or theme.

When not to use Context

Context is powerful, but it can be overused. For rapidly changing values, lifting state up or using dedicated state management libraries may give better performance.