What is React Context and when should you use it?

State Management

#context#global-state#prop-drilling#themes

Answer

React Context is a feature that allows you to share data between components without having to pass props down manually at every level.

It's useful for global state like themes, user authentication, or language preferences.

Explanation

Context is designed to share data that can be considered 'global' for a tree of React components.

It's an alternative to prop drilling and can be used with or without Redux.

Code Example

// Create a context const ThemeContext = React.createContext('light');

// Provider component function App() { const [theme, setTheme] = useState('light');

return ( <ThemeContext.Provider value={theme}> <div className={

}> <Header /> <Main /> <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Toggle Theme </button> </div> </ThemeContext.Provider> ); }

// Consumer component function Header() { const theme = useContext(ThemeContext); return <header className={theme}>Header</header>; }

What is React Context and when should you use it?

Answer

Explanation

Code Example

Was this question helpful?