State Management with React Context API

Transcript

1. State management with React Context API
2. About me My name is Vivek Nayyar I work as an UI Engineer with Trusting Social. ex hotstar and housing. Follow me @viveknayyar09
3. Problem - Every component has to pass the currency prop(Prop Drilling) PhysialCo muting HTML, CSS,JS
4. Problem:- We will need to send the data 10 from the Red component to the Blue one just to be able to send it to the Green one
5. Context API to the Rescue
7. React Context API — What is it? Context provides a way to pass data through the component tree without having to pass props down manually at every level.
8. How to use this new version of Context? • React.createContext is passed the initial value. It returns an object with a Provider and a Consumer. • The Provider component is used higher in the tree and accepts a prop called value. This value can be anything! • The Consumer component is used anywhere below the Provider in the tree and accepts a prop called children and must be a function that can accept a value and return a JSX.
9. https://gist.github.com/vivek12345/ff41d0380dec9bad026283e6c1c5be4a
10. How can I use Context API to replace redux?
11. Basic Flux Representation - Store is a single global source of truth. - Action are functions to call api endpoints and get the new data. - Dispatcher is used to dispatch the action to reducers which in turn update the store and the ui re-renders.
12. Implementation With the createContext() API example above, we already have the unidirectional Store → View in place. const Context = createContext()
13. What we need is actions and dispatchers to dynamically update the store. What if our dynamic store was just the state of a root React component?
14. Display component to render the count
15. Caveats Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code above will re-render all consumers every time the Provider re-renders because a new object is always created for value:
16. Better Way - To get around this, lift the store value needed into the parent’s state. - Lift value inside this.value - Re-render only if this.state is not equal to this.value.state
17. Who all are already using context api? • Redux • MobX • React Router
18. Existing state management libraries which are using new React 16.3 Context API • Unstated (https://github.com/jamiebuilds/unstated) • React-waterfall (https://github.com/didierfranc/react-waterfall) • Constate (https://github.com/diegohaz/constate) • React-restated (https://github.com/rajeshpillai/react-restated)
19. Thank You Context API Official Docs https://reactjs.org/docs/context.html