Upgrade to Pro — share decks privately, control downloads, hide ads and more …

new version of context in React 16.3

sota ohara
March 30, 2018
1.2k

new version of context in React 16.3

sota ohara

March 30, 2018
Tweet

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