Introduction to React Context API

React’s context API is a powerful feature. Context API provides a way to pass data through the component tree without having to pass props down manually to every level.

What can Context API do for you

You can manage state management with React Context API.

Context API allows you to store data and access them where they are needed. You don’t have to pass down data through props anymore. With React Context API you can define something like an “application global state” and use that data where needed.

React Context API depends on three main steps

  • Passing the initial state to React.createContext This function then returns an object with a Provider and a Consumer.
  • Using the Provider component at the top of the tree and making it accept a prop called value.
  • Using the Consumer component anywhere below the Provider in the component tree to get a subset of the state.

Useful links for more study
https://reactjs.org/docs/context.html
https://github.com/diegohaz/awesome-react-context
https://daveceddia.com/context-api-vs-redux/

Check this Awesome video

 

2 thoughts on “Introduction to React Context API”

    1. Yes, Redux best. Redux not only aids in state management but also makes it straightforward to implement advanced features such as infinite undo/redo and live-editing time travel

Leave a Reply

Your email address will not be published. Required fields are marked *