new version of context in React 16.3

Transcript

1. new version of context in React 16.3 - We Are JavaScripters! @17th Mercari, inc. Frontend Engineer Sota Ohara
2. about me Sota Ohara / sottar Mercari, inc. / Souzoh, inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
3. React v16.3 is upcoming
4. React v16.3 is upcoming React v16.3 has released
5. React v16.3 has released https://twitter.com/reactjs/status/979458172833357825
6. • New life-cycle methods The functions that will be deprecated are: • componentWillMount • componentWillUpdate • componentWillReceiveProps New method is: • static getDerivedStateFromProps • StrictMode API • AsyncMode • Update React DevTools • Update Context API ….. What’s new in React v16.3
7. New context API
8. • Typically, data in a React application is passed top- down (parent to child) via props. • So, we also need to pass the related entire site values each layer components motivation it’s too painful !!
9. • The value set in the context can be acquired from any child component. • New component types: Provider and Consumer.
 • Refer to the ancestor as the provider 
 and the child as the consumer
 • Providers and consumers come in pairs New context API
10. Basic Sample
11. * A provider-consumer pair is created using * requires a default value React.createContext() React.createContext()
12. * The provider accepts a context value as a prop
 * In the typical scenario, context value has in state. and updated by calling setState. Provider
13. * The consumer uses a render prop API
 * In the typical scenario, context value has in state
 and updated by calling setState. Consumer
14. FYI. What’s new in React 16.3(0-alpha) https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
15. We are hiring !!