What is the purpose of context in React?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext('light');

function Toolbar() {
  const theme = useContext(ThemeContext);   // no props involved
  return <button className={theme}>Save</button>;
}

export default function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(t => (t === 'light' ? 'dark' : 'light'))}>
        Toggle theme
      </button>
    </ThemeContext.Provider>
  );
}