Slide 1
Slide 1 text
new version of context in React 16.3
- We Are JavaScripters! @17th
Mercari, inc.
Frontend Engineer
Sota Ohara
Slide 2
Slide 2 text
about me
Sota Ohara / sottar
Mercari, inc. / Souzoh, inc.
Frontend Engineer
mercari NOW, CSTool
@sottar_
sottar
Slide 3
Slide 3 text
React v16.3 is upcoming
Slide 4
Slide 4 text
React v16.3 is upcoming
React v16.3 has released
Slide 5
Slide 5 text
React v16.3 has released
https://twitter.com/reactjs/status/979458172833357825
Slide 6
Slide 6 text
• 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
Slide 7
Slide 7 text
New context API
Slide 8
Slide 8 text
• 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 !!
Slide 9
Slide 9 text
• 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
Slide 10
Slide 10 text
Basic Sample
Slide 11
Slide 11 text
* A provider-consumer pair is created using
* requires a default value
React.createContext()
React.createContext()
Slide 12
Slide 12 text
* The provider accepts a context value as a prop
* In the typical scenario, context value has in state.
and updated by calling setState.
Provider
Slide 13
Slide 13 text
* The consumer uses a render prop API
* In the typical scenario, context value has in state
and updated by calling setState.
Consumer
Slide 14
Slide 14 text
FYI. What’s new in React 16.3(0-alpha)
https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
Slide 15
Slide 15 text
We are hiring !!