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

New context API

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

  • 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

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

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

AsyncMode

New version of React Developer Tools

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?

Last’s week next week is this week.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Unique encounter: createDocumentFragment()

Angular Fire Part 1: Getting Connected

Javascript core concepts

Switch Statement; A Basic JavaScript Concept

The journey from callback to async-await as a front-end developer

Five Common GraphQL Problems and How Neo4j-GraphQL Aims To Solve Them

Cluster Location-based Data Using K-Means Algorithm in Node.js and React

Understanding React — Component life-cycle

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
Bartosz Szczeciński

Bartosz Szczeciński

More from Medium

Why Use React JS: A Complete Guide

React Programming-Fundamentals

ES Lint “react-hooks/exhaustive-deps” infinite loop potential solution