Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
new version of context in React 16.3
sota ohara
March 30, 2018
3
1.2k
new version of context in React 16.3
sota ohara
March 30, 2018
Tweet
Share
More Decks by sota ohara
See All by sota ohara
Implement prerendering w/ puppeteer
sottar
1
130
create own CMS from scratch
sottar
2
8.3k
Let’s try to hack AST of JavaScript
sottar
1
1.3k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
17k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.3k
2ヶ月半でサービスをリリースした話し
sottar
2
1.9k
Redux のディレクトリ構成を考える
sottar
2
13k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
4.8k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Raft: Consensus for Rubyists
vanstee
130
5.7k
Done Done
chrislema
178
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Designing for humans not robots
tammielis
245
24k
What's new in Ruby 2.0
geeforr
336
30k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
32
1.8k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
Embracing the Ebb and Flow
colly
75
3.6k
Transcript
new version of context in React 16.3 - We Are
JavaScripters! @17th Mercari, inc. Frontend Engineer Sota Ohara
about me Sota Ohara / sottar Mercari, inc. / Souzoh,
inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
React v16.3 is upcoming
React v16.3 is upcoming React v16.3 has released
React v16.3 has released https://twitter.com/reactjs/status/979458172833357825
• 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
New context API
• 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 !!
• 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
Basic Sample
* A provider-consumer pair is created using * requires a
default value React.createContext() React.createContext()
* The provider accepts a context value as a prop
* In the typical scenario, context value has in state. and updated by calling setState. Provider
* The consumer uses a render prop API * In
the typical scenario, context value has in state and updated by calling setState. Consumer
FYI. What’s new in React 16.3(0-alpha) https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b
We are hiring !!