What is Context API in ReactJS

1// Context lets us pass a value deep into the component tree
2// without explicitly threading it through every component.
3// Create a context for the current theme (with "light" as the default).
4const ThemeContext = React.createContext('light');
5
6class App extends React.Component {
7  render() {
8    // Use a Provider to pass the current theme to the tree below.
9    // Any component can read it, no matter how deep it is.
10    // In this example, we're passing "dark" as the current value.
11    return (
12      <ThemeContext.Provider value="dark">
13        <Toolbar />
14      </ThemeContext.Provider>
15    );
16  }
17}
18
19// A component in the middle doesn't have to
20// pass the theme down explicitly anymore.
21function Toolbar() {
22  return (
23    <div>
24      <ThemedButton />
25    </div>
26  );
27}
28
29class ThemedButton extends React.Component {
30  // Assign a contextType to read the current theme context.
31  // React will find the closest theme Provider above and use its value.
32  // In this example, the current theme is "dark".
33  static contextType = ThemeContext;
34  render() {
35    return <Button theme={this.context} />;
36  }
37}