<\/span><\/h3>\n\n\n\nGroups of React multiple-state turning into one render for better performance is known as Batching.<\/p>\n\n\n\n
Before, we had to batch two or more state updates inside the same event into one rerender batch. This will prevent the half-finished rendering of components. With React 18, All this batching process get change and update. In addition, react 18 Automated this whole process making this batching process more consistent and streamlined.<\/p>\n\n\n\n
const App = () => {\n const [color, setColor] = useState(0);\n const [count, setCount] = useState(0);\n const handleClick = () => {\n setColor((count) => count + 1); \/\/ No re-render yet\n setCount((count) => count + 1); \/\/ No re-render yet\n \/\/ Re-render (updates batched)\n }\n return (\n <div>\n <button onClick={handleClick}>Next<\/button>\n <span style={{ color: color % 2 === 0 ? \"blue\" : \"black\" }}>{`${count} ${color % 2 === 0 ? 'Even':'Odd'}`}<\/span>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\nIt can always rerender automatic batching no matter where the states are.<\/p>\n\n\n\n
<\/span>Concurrent Rendering<\/span><\/h3>\n\n\n\nAnother significant change seen in React 18 is ‘Concurrent Mode’ instead of ‘concurrent rendering’ of previous react versions.<\/p>\n\n\n\n
It is not just a name change; this will allow adopting concurrent features without rewriting codes and according to developers. There will be many features in React 18 that might come open; As alpha, not all of them have mention anywhere yet. Here are some concurrent mode features that we know for now –<\/p>\n\n\n\n
\n- startTransition: Keeps the user interface interactive even during Big transitions.<\/li>\n\n\n\n
- <SuspenseList>: Loading Indicators order co-ordinator<\/li>\n\n\n\n
- Server-Side Rendering with selective Hydration: Helps in reducing loading time and be interactive and fast.<\/li>\n\n\n\n
- useDeferredValue: defer the update for your app<\/li>\n<\/ul>\n\n\n\n
The best part about all these features is that we don’t have to include them throughout the whole development; We can choose to build with these as opt-in at any part of the app.<\/p>\n\n\n\n
This made the new Concurrent Mode more fast, productive, effortless, and efficient.<\/p>\n\n\n\n
<\/span>Root API<\/span><\/h3>\n\n\n\nRoot API is a pointer for data structure in previous versions of React. They are primarily use to track render trees. With the new React 18, It will deploy two different root APIs, Legacy root API and the new ReactDOM.createRoot. the legacy root will run legacy mode in ReactDOM.createRoot API. This ReactDOM.createRoot can integrate improvements to the app efficiently and add a deprecated warning.<\/p>\n\n\n\n
Old root API<\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom;\nimport App from 'App';\nReactDOM.render(<App \/>, document.getElementById('root'));<\/code><\/pre>\n\n\n\nNew Root API<\/p>\n\n\n\n
import ReactDOM from 'react-dom';\nimport App from 'App';\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App \/>);<\/code><\/pre>\n\n\n\n<\/span>Strict Effect Mode<\/span><\/h3>\n\n\n\nReact 18 will provide Strict Effect Mode, which will improve DX and development versions. With this react can detect unusual movement by running side effects twice like-<\/p>\n\n\n\n
mount-> unmount-> mount<\/code><\/pre>\n\n\n\nReact 18 will be a vast improvement, and we are all going to leverage its advanced features. Developers are halfway through the development yet, still impressed users with these fantastic features. You can try Alpha ReactJS 18 from their website or wait for 3 to 5 months for a richer stable build.<\/p>\n","protected":false},"excerpt":{"rendered":"
React 17 was announced last year; It was primarily designed to improve basic groundwork and architecture for upcoming updates and didn’t offer new features. It was intentionally built for upcoming update adoption to make things easier and faster for the future. Now Facebook and React community is preparing to get us into React 18. On…<\/p>\n","protected":false},"author":2,"featured_media":6814,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[42],"tags":[149,249,250],"class_list":["post-692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript-libraries","tag-react-18-beta","tag-react-18-new-hooks"],"_links":{"self":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts\/692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":0,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts\/692\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/media\/6814"}],"wp:attachment":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/media?parent=692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/categories?post=692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/tags?post=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}