React 17.0

Saturday, March 13, 2021 min read

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.0 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
Old functions names will continue to work until version 17.0, use the rename-unsafe-lifecycles codemod to automatically update your components.

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.

Both the older componentWillReceiveProps and the newgetDerivedStateFromProps methods add significant complexity to components.
class Example extends React.Component {
    static getDerivedStateFromProps(props, state) {
        // ...
    }
}

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.

class Example extends React.Component {
    getSnapshotBeforeUpdate(prevProps, prevState) {
        // ...
    }
}
This lifecycle isn't often needed, but can be useful in cases like manually preserving scroll position during re-renders.

Component Lifecycle

class Example extends React.Component {
    // Immediately before initial rendering.
    // usage: update state via this.setState()
    UNSAFE_componentWillMount() {}

    // When component receive new props
    // usage: sync state to props
    UNSAFE_componentWillReceiveProps(nextProps) {}

    // Before rendering, after receive new props or state (can return false to prevent rendering)
    // usage: to increasing performance
    shouldComponentUpdate(nextProps, nextState, nextContext) {}

    // Before rendering, after receive new props or state (can return false to prevent rendering)
    // usage: synchronize state to props
    UNSAFE_componentWillUpdate(nextProps, nextState) {}

    // After component's updates are flushed DOM
    // usage: AJAX calls
    componentDidUpdate(prevProps, prevState, snapshot) {}

    // Immediately after initial rendering.
    // usage: AJAX calls
    componentDidMount() {}

    // Immediately before removing from DOM
    // usage: remove listeners/timers created
    componentWillUnmount() {}
}

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.0. What we had in the React 17 major release as new features that will redefine how React applications are built.