React Context API
2 likes1,620 views
The document provides an overview of the React Context API, including what it is, when to use it, and how to use it. It explains that the Context API was introduced by React to solve the problem of prop drilling and make state management simpler for developers. It describes the key aspects of using the Context API, such as creating contexts with React.createContext, rendering context providers with Context.Provider, and subscribing to contexts within components using Context.Consumer. Examples and additional resources on the Context API are also provided.
React Context API
- 2. 2 NodeXperts Overview ● What is React Context API ● When to use Context ● How to use React Context API ○ React.createContext ○ Context.Provider ○ Context.Consumer ● Examples ● Resources ● Q&A
- 3. 3 NodeXperts What is React Context API “The Context API is a component structure provided by the React framework, which enables us to share specific forms of data across all levels of the application. It’s aimed at solving the problem of prop drilling.”
- 4. 4 NodeXperts Before Context API Problem ● Prop Drilling ● We pass props down to the levels and levels of the component tree when not all of those components necessarily need those props. ● Suppose component hierarchy is complex then state management would be overhead for developers.
- 5. 5 NodeXperts After Context API Solution ● For state management there are couple of libraries available like Redux (most used and trending). ● But React introduced the Context API to solve the problem of props drilling and made developers work of state management simple.
- 6. 6 NodeXperts When to Use When to use Context ● As React suggests “If you only want to avoid passing some props through many levels. ● Context is designed to share data that can be considered “global” for a tree of React components. ● Such as the current authenticated user, theme, or preferred language.”
- 7. 7 NodeXperts How to Use React Context API
- 8. 8 NodeXperts Context.Provider Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. <MyContext.Provider value={/* some value */}>
- 9. 9 NodeXperts Context.Consumer A React component that subscribes to context changes. This lets you subscribe to a context within a function component. <MyContext.Consumer> {value => /* render something based on the context value */} </MyContext.Consumer>
- 10. 10 NodeXperts Example ● Dynamic Context ● Updating Context ● Multiple Context
- 11. 11 NodeXperts
- 12. 12 NodeXperts Class.contextType class MyClass extends React.Component { componentDidMount() { let value = this.context; /* perform a side-effect at mount using the value of MyContext */ } componentDidUpdate() { let value = this.context; /* ... */ } componentWillUnmount() { let value = this.context; /* ... */ } render() { let value = this.context; /* render something based on the value of MyContext */ } } MyClass.contextType = MyContext;
- 13. 13 NodeXperts React.createContext Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree. ○ const MyContext = React.createContext(defaultValue)
- 14. 14 NodeXperts Resources ● https://reactjs.org/docs/context.html ● https://www.toptal.com/react/react-context-api ● https://appdividend.com/2018/11/03/react-context- api-tutorial-with-example/ ● https://blog.pusher.com/react-context-api/
- 15. 15 NodeXperts Q1 . Can Context replace Redux? Ans. Yeah context can replace Redux, but it won’t do everything that Redux does. In particular, it won’t perform any of the optimizations that Redux gives you for free. So before you replace Redux with context, there’s a thing or two that you should know about performance. ● Redux provides time traveller debugging ● It provides debugging tools ● It provides middlewares ● It combines different reducers they don’t affect each other Questions and Answers