React JS Context API

In component-based technologies most of the time it happens that data need to share data between multiple components. Or need to pass data throughout the component tree. that if particular data gets changed and effect can be seen wherever displaying that data in UI. This approach is used by many technologies like React, Angular and many more component-based technologies. Here, The Context API of React will be explored in the next step.

Basically React has many approaches to share data between multiple components like redux or throughout the component tree using props. and also we can use its built-in state management for react projects. let’s explore Context APIs deeply.

What is Context API?

Context API is built-in state management provided by React. There is a way to pass data throughout the component tree without pass using props through every level of tree manually. in simple data that can be considered as “global”

In general phenomena, data can be passed through props in the component tree. but in the scenario where data needs to pass to the nested and bottom level component? Context has a way to share data like these without passing through every level in component-tree.

When to use context API?

Context is used to share data that can be used globally in the entire project. It can be anything like user authentication, theme, preferred languages, etc.

Using context, Data does not need to pass through intermediate elements. context used when data need to pass on nesting levels.

How to use Context API?

In the given example, we are passing the theme in props.

class App extends React.Component {
  //theme props need to pass to the end component
     render() {
        return Dashboard theme="dark" /;
     }
}
function Dashboard(props) {
    return (
        div
	    //theme props need to pass to the end component
             MainButton theme={props.theme} /
        /div
    );
}
class MainButton extends React.Component {
    render() {
	//theme props need to pass to the end component	
        return Button theme={this.props.theme} /;
    }
}

but after use of Context API, there is no need to pass it in props throughout each layer

/* Theme declared globally over here*/
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      ThemeContext.Provider value="dark"
        Dashboard /
      /ThemeContext.Provider
    );
  }
}

// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Dashboard(props) {
  return (
    div
      MainButton /
    /div
  );
}

class MainButton extends React.Component {

  static contextType = ThemeContext;
  render() {
    return Button theme={this.context} /;
  }
}

without context, it might feel redundant to pass data through many levels if, in the end, only the last component needs to use that data.

Conclusion

The conclusion is simply that if there is only data needed to use in the nested component then obviously it is worth using context API.