React is one of the most popular Javascript library and it is an efficient, declarative and flexible Javascript library used to build user interfaces. It has more than 156000 starts on GitHub and is one of the vibrant frontend communities building great applications. React has taken some important steps to improve the developer experience and efficiency of react-built applications. Here we’ll see changes in react v17.
Know the most common mistakes that you must avoid in react development at- Most Common Mistakes To Avoid In React Development
1. v17 Allows Gradual React Upgrades-
When you update your entire application from React 16 to 17, the application may work well. But if the codebase was written more than few years ago and is not maintained regularly, it may cause difficulty for you. Although two versions of React can be utilized on the website, it was not stable and caused event issues until react v17 came into the focus. Some improvements have been made to the React event system so as to allow gradual upgrades. React 17 is an essential release because the changes could break down.
2. No Event Pooling-
Starting from this new version, event pooling optimization has been removed from React because of confusion and the simple fact that doesn’t improve modern browser performance.
function handleChange(e) { setData(data => ({ ...data, // This crashes in React 16 and earlier: text: e.target.value })); }
The team of React calls this a behavior change and has labeled it breaking, although they have not seen it break anything at Facebook, so the chances are very low. Also, e.persist() is still available on event objects, in spite of the fact that it does not do anything.
3. Changes To Event Delegation-
In react components, usually you write event handlers inline:
<button onClick={handleClick}>
The vanilla DOM equivalent to this code is like:
myButton.addEventListener('click', handleClick);
React does not connect them to the DOM nodes you declare on most events. Instead, it adds one handler per event type directly at the document node. This is called a delegation for event. It makes it simple to add new features like replaying events, apart from its efficiency advantages for large apps. From its initial release, React has done event delegation automatically. When DOM event initiates on a document, React understands which component to call and then the React event goes upwards through components. Whereas, in reality, the native event has already bubbled up to document level where React installs its event handlers.
4. Effect Cleanup Timing-
New version makes the useEffect Hook cleanup function timing more consistent.
useEffect(() => { // This is the effect itself. return () => { // This is its cleanup. };});
In the previous version React 16, the effect cleanup function is run synchronously, that don’t delay screen updates and which React runs asynchronously by default. The React team has discovered that this synchronous process is not so ideal, just like it is not with componentWillMount for large applications when the user switches tabs.
This new version of react brings some new changes. The effect cleanup function will work asynchronously like others and if component is un-mounting, the cleanup will only run after updates are shown on screen.
5. Removing Private Exports-
For web, react native used to rely on specific internals of the system, but this dependency became weak and used to clash. These private exports ended in React 17. We know that React native for web was the only project that used them and that migration to new method has been already completed which doesn’t rely on these private exports. This means that old React Native Web version won’t be compatible with React 17 but still work with updated versions. In reality, it don’t affect because React Native had to release new versions to adjust to changes in its internal react.
6. New Lifecycle Methods-
Two new lifecycle methods are switched with deprecated lifecycle methods- getDerivedStateFromProps and getSnapShotBeforeUpdate. Some processes are replaced by these new lifecycle methods. For example, componentWillUpdate can be replaced by getDerivedStateFromPropstogether with shouldComponentUpdate, componentWillMount should be removed altogether for async rendering.
getDerivedStateFromProps–
This method is bound to replace componentWillReceiveProps and componentWillUpdate and will be called after a component is created and when it received new props.
This returns an object to update state when props change or null when there is not change in state.
state = { cachedSomeProp: null }; static getDerivedStateFromProps(nextProps, prevState) { return { cachedSomeProp: nextProps.someProp, .. }; }
getSnapshotBeforeUpdate-
It manages the component changes and replaces componentWillUpdate efficiently and operates with componentDidUpdate. This is called and returns the value to the componentDidUpdate that handles the changes before DOM updates:
class ScrollingList extends React.Component { listRef = null; getSnapshotBeforeUpdate(prevProps, prevState) { if (prevProps.list.length < this.props.list.length) { return ( this.listRef.scrollHeight - this.listRef.scrollTop ); } return null; } componentDidUpdate(prevProps, prevState, snapshot) { if (snapshot !== null) { this.listRef.scrollTop = this.listRef.scrollHeight - snapshot; } } render() { return ( {/* …contents… */} ); } setListRef = ref => { this.listRef = ref; }; }
7. Browser Alignment-
Some changes have been made to event system in React, which includes:
These changes align React more closely with how browsers behave and improve interoperability.
You can also know the reasons to render React on server side at- Why You Should Render React On Server Side?