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
   

   View Slide

2. about me
   Sota Ohara / sottar
   Mercari, inc. / Souzoh, inc.
   Frontend Engineer
   mercari NOW, CSTool
   @sottar_
   sottar
   

   View Slide

3. React v16.3 is upcoming
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

7. New context API
   

   View Slide

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

   View Slide

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
   

   View Slide

10. Basic Sample
    

    View Slide

11. * A provider-consumer pair is created using
    * requires a default value
    React.createContext()
    React.createContext()
    

    View Slide

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
    

    View Slide

13. * The consumer uses a render prop API

    * In the typical scenario, context value has in state

    and updated by calling setState.
    Consumer
    

    View Slide

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

    View Slide

15. We are hiring !!
    

    View Slide