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 !!