What’s new in React 18 Beta
React is a JS powerful Library It works just as any framework. Currently, the latest version is the 17.0.2 version.
React 18 was announced on Nov 15th Now it’s in beta version. Here are a few updates by React Team. This update is mainly focused on third-party-library so this will not affect or conflict with current version projects.
What’s Comming in 18?
Root API
React 18 introduce Root API ReactDOM.createRoot Before React 18, we used ReactDOM.render to render a component to the page. And The good part is it will not affect whether we use render or createRoot So your current code will still work.
Some Expected Improvements in
- automatic batching
- startTransition
Automatic Batching
These features are possible thanks to a new opt-in mechanism they are adding React 18. It’s known as “concurrent rendering” and it will create multiple versions of the User Interface at the same time. This change is mostly behind-the-scenes.
startTransition
It can be used to mark UI updates that do not need urgent resources for updating. For eg: when typing in a typeahead field, there are two things happening – a blinking cursor that shows visual feedback of your content being typed, and search functionality in the background that searches for the data that is typed.
Showing visual feedback to the user is important and therefore urgent. Searching is not so urgent, and hence can be marked as non-urgent. This is where startTransition comes into play.
The some of the characteristics are :
By marking non-urgent UI updates as “transitions”, React will know which updates to prioritize making it easier to optimize rendering and get rid of stale rendering. Updates marked in non-urgent startTransition can be interrupted by urgent updates such as clicks or key presses.
The goal of the React 18 is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries.
The Working Group is hosted on GitHub Discussions and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share their research findings.
How to install React 18 Alpha today
New alphas are regularly published to npm using the @alpha tag. These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in alpha.
Change React.render to React.createRoot
Note – There may be significant behavioural or API changes between alpha releases. Please remember that alpha releases are not recommended for user-facing, production applications.
