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.6k
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
230
Implement prerendering w/ puppeteer
sottar
1
250
create own CMS from scratch
sottar
2
8.9k
Let’s try to hack AST of JavaScript
sottar
1
1.7k
フロントエンドエンジニアが伝えたい最近の事情
sottar
28
18k
複数人で高速に開発するためのnpmモジュール
sottar
5
2.5k
2ヶ月半でサービスをリリースした話し
sottar
2
2.1k
Redux のディレクトリ構成を考える
sottar
2
14k
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
sottar
9
5k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Bash Introduction
62gerente
611
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Visualization
eitanlees
146
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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 !!