React Context API

React Context API

• 1.
  React Context API
• 2.
  2 NodeXperts Overview ● What isReact 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 ReactContext 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 Whento 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 UseReact Context API
• 8.
  8 NodeXperts Context.Provider Every Context objectcomes 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 componentthat 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 extendsReact.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 Contextobject. 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 . CanContext 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
• 16.
  16 NodeXperts Reach me at visaali.s@successive.tech