React 17

React team are actively working on the new React features, but that was not the main focus of this latest version.

The launch of React 17 was a fundamental part of the strategy to implement them without leaving anyone behind.

Gradual Upgrades

In previous versions React updates had to be "all-or-nothing". Either we chose to stay with an old version or update to a new version.

React 17 allows for gradual React updates.

So when you upgrade from React 16 to React 17 you will usually update your entire application at once, but it can become increasingly challenging if a code base was written old or not receive actively updates.

React 17 will fix that problems, this means that when React 18 and next's versions, will have an option to update entire application at once or update piece by piece.

If you may decide to migrate most of your application to React 18, but keep some piece loaded slowly or sub-routing in React 17 will work without any problems.

Deprecated functions

React decided to deprecate some of the lifecycle methods with React 17.

Reason they decide removed some methods was related with original lifecycle model was not intended for some of the upcoming features like async rendering. With the introduction of async rendering, some of these lifecycle methods will be unsafe if used.

More details of that you can read post created by React team.

In version 17 will saw deprecation warnings, related with some renamed functions, that will be removed in next MAJOR version.

• componentWillMount renamed to UNSAFE_componentWillMount
• componentWillReceiveProps renamed to UNSAFE_componentWillReceiveProps
• componentWillUpdate renamed to UNSAFE_componentWillUpdate

New Lifecycle Methods

getDerivedStateFromProps

The new static getDerivedStateFromProps lifecycle is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or null to indicate that the new props do not require any state updates.

1class Example extends React.Component {
2    static getDerivedStateFromProps(props, state) {
3        // ...
4    }
5}

getSnapshotBeforeUpdate

Lifecycle function is called right before mutations are made (before the DOM is updated). The return value for this lifecycle will be passed as the 3ª parameter to componentDidUpdate.

1class Example extends React.Component {
2    getSnapshotBeforeUpdate(prevProps, prevState) {
3        // ...
4    }
5}

Component Lifecycle

1class Example extends React.Component {
2    // Immediately before initial rendering.
3    // usage: update state via this.setState()
4    UNSAFE_componentWillMount() {}
5
6    // When component receive new props
7    // usage: sync state to props
8    UNSAFE_componentWillReceiveProps(nextProps) {}
9
10    // Before rendering, after receive new props or state (can return false to prevent rendering)
11    // usage: to increasing performance
12    shouldComponentUpdate(nextProps, nextState, nextContext) {}
13
14    // Before rendering, after receive new props or state (can return false to prevent rendering)
15    // usage: synchronize state to props
16    UNSAFE_componentWillUpdate(nextProps, nextState) {}
17
18    // After component's updates are flushed DOM
19    // usage: AJAX calls
20    componentDidUpdate(prevProps, prevState, snapshot) {}
21
22    // Immediately after initial rendering.
23    // usage: AJAX calls
24    componentDidMount() {}
25
26    // Immediately before removing from DOM
27    // usage: remove listeners/timers created
28    componentWillUnmount() {}
29}

Event Delegation

The other great feature as related with Event Delegation that will no longer attach event handlers at the document level. Instead it will attach them to the root DOM container into which your React tree is rendered.

So React 16 and earlier, React would do document.addEventListener() for most events. React 17 will call rootNode.addEventListener() under the hood instead.

Conclusion

No new features, there wasn't a big change between version 16.8 and version 17.

What we had in the React 17 major release as new features that will redefine how React applications are built.