What to Expect from React 18

The newest upgrade to React is coming! The last big update was October 2020 with the release of React 17.

The team at React understands that for some people, having too much change so fast isn’t good. We all learn at our own pace, so it’s important to try out new features of this upcoming update at your own pace.

React understands that with the next major update to the framework, developers need to be prepared for the gradual adoption of new features in React 18. Biggest takeaway with this update, ‘no significant out-of-the-box breaking changes to component behavior.’ Honestly, this is a relief, knowing that the benefits of the upgrade won’t require any major changes to your existing code.

The change in the Root API is definitely a major change and may trip me up for a while. Honestly, I’m thankful for this change, now I can understand what root is at an even deeper level. A “root” is a pointer to the top-level data structure that React uses to track a tree that it will render. In the legacy API, the root wasn’t exposed to the user because we attached it to the DOM element and accessed it through the DOM node.

I’m used to seeing something like this at the top level of my applications:

import ReactDOM from ‘react-dom’;
import App from 'App';

ReactDOM.render(<App />, document.getElementById('root'));

There’s always a learning curve when there’s a change to a major concept like this. In the New Root API, the caller creates a root and then calls render on it:

import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// Create a root.
const root = ReactDOM.createRoot(container);

// Initial render: Render an element to the root.
root.render(<App tab="home" />);

This change is mostly behind the scenes, but it unlocks new possibilities to improve both the real and perceived performance of your applications.

What impresses me most about the tech industry is the amount of collaboration that is done between people from all different skillsets and backgrounds. React is trying something new for this release: they’ve invited a panel of experts, developers, library authors, and educators from across the React community to participate in the React 18 Working Group. Access to the Working Group’s findings can be found on GitHub Discussions where the community can provide feedback, ask questions, and collaborate on the release. Anyone can read the discussions in the React 18 Working Group repo. I love that the React community is so willing to share ideas.

There is no official release date for alpha so sit sight & HAPPY CODING