new version of context in React 16.3

Transcript

1. 1.

   new version of context in React 16.3 - We Are

   JavaScripters! @17th Mercari, inc. Frontend Engineer Sota Ohara
2. 2.

   about me Sota Ohara / sottar Mercari, inc. / Souzoh,

   inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
3. 3.

   React v16.3 is upcoming

4. 4.

   React v16.3 is upcoming React v16.3 has released

5. 5.

   React v16.3 has released https://twitter.com/reactjs/status/979458172833357825

6. 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. 7.

   New context API

8. 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. 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. 10.

    Basic Sample

11. 11.

    * A provider-consumer pair is created using * requires a

    default value React.createContext() React.createContext()
12. 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. 13.

    * The consumer uses a render prop API
 * In

    the typical scenario, context value has in state
 and updated by calling setState. Consumer
14. 14.

    FYI. What’s new in React 16.3(0-alpha) https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b

15. 15.

    We are hiring !!