Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
new version of context in React 16.3
Search
sota ohara
March 30, 2018
3
1.7k
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
Re-Architecture of ReactNative
sottar
0
270
Implement prerendering w/ puppeteer
sottar
1
290
create own CMS from scratch
sottar
2
9k
Let’s try to hack AST of JavaScript
sottar
1
1.8k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.6k
2ヶ月半でサービスをリリースした話し
sottar
2
2.2k
Redux のディレクトリ構成を考える
sottar
2
15k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to Ace a Technical Interview
jacobian
280
24k
Building Adaptive Systems
keathley
43
2.8k
Fireside Chat
paigeccino
40
3.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Embracing the Ebb and Flow
colly
88
4.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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 !!