What’s new in React 16.3(.0-alpha)

New context API

Context API was always a thing of mystery — it’s an official, documented React API but at the same time developers warned us not to use it because the API might change with time, and it was missing some documentation on purpose. Well, that time is now — the RFC phase has passed and the new API is merged. It is definitely more “user friendly” and might make your life a bit easier when all you want is simple state management without the “overhead” of Redux or MobX.

Creation of the new context via React.createContext
Usage of the new context API — Context.Provider
Usage of the new context API — Context.Consumer
  • the consumer must have access to the same Context component — if you were to create a new context, with the same parameter as input, a new Context would be created and the data would not be passed. For this reason please consider Context a component — it should be created once and then exported + imported whenever needed
  • the new syntax uses the function as child (sometime called render prop) pattern — if you’re not familiar with this pattern I recommend reading some articles on it
  • it is no longer required to use prop-types to specify contextProps if you want to make use of the new Context API

New life-cycle methods

The other RFC to make it into the alpha release concerns deprecation of some life-cycle methods and introduction of one (four) new.

  • componentWillMount — please use componentDidMount instead
  • componentWillUpdate — please use componentDidUpdate instead
  • componentWillReceiveProps — a new function, static getDerivedStateFromProps is introduced
Everyone panics. Dan says not to panic. Some people still panic.
  • UNSAFE_componentWillMount
  • UNSAFE_componentWillReceiveProps
  • UNSAFE_componentWillUpdate

static getDerivedStateFromProps

As componentWillReceiveProps gets removed, we need some means of updating the state based on props change — the community decided to introduce a new — static — method to handle this.

Using getDerivedStateFromProps in order to update state

Things to keep in mind:

Remember to init state!
Error, please use just getDerivedStateFromProps
Declare getDerivedStateFromProps without using static

StrictMode

Strict mode is a new way to make sure your code is following the best practices. It’s a component available under React.StrictMode and can be added to your application tree or subtree:

Usage of the ‘use strict’ … I mean StrictMode
Error: unsafe lifecycle in StrictMode subtree

AsyncMode

The not-yet-active async Component support was renamed to be aligned with the StrictMode and is now available under React.unstable_AsyncMode. Using it will also activate StrictMode warnings.

New version of React Developer Tools

Additionally, a new version of the Developer Tools was released to support debugging the new components.

React. __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED is still better
New AsyncComponent is visible in the Firefox Developer Tools

More to come?

Please keep in mind that this is an alpha release and the stable 16.3 might have more / fewer changes. That said, according to Dan, 16.3 should be released “sometime next week”:

Last’s week next week is this week.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store