A React.JS 18-as verziója új párhuzamos rerendelővel rendelkezik, ami lehetővé teszi számára, hogy számos új fejlesztést kínáljon, mint például a renderelési folyamat megszakításának lehetősége.
Egészen a React 18-ig a renderelési folyamat szinkron volt és nem megszakítható. Ez azt eredményezi, hogy a felhasználói felület zárolódik rendereléskor, így a felhasználó reakciójára (inputjaira) nem biztos, hogy képes időben reagálni.
Az új párhuzamos rerenderelővel ez a folyamat aszinkronná válik , így megszakítható, szüneteltethető, ezáltal a használat gördülékenyebbé válik, az ügyfélélmény nő.
Ezeknek az új funkcióknak az eléréséhez viszont a webfejlesztőnek frissítenie kell a kódjait a legújabb 18-as React.JS-re.

A React 18-at és a ReactDOM-ot a szokásos npm install vagy yearn add paranccsal frissíthetjük vagy CDN használatával egyszerűen csak kicseréljük a CDN linket.
Amint ezt megtettük, figyelmeztetés jelenik meg a még React 18 előtt írt alkalmazásokban, miszerint a ReacdDOM.render metódus többé nem támogatott a React.JS 18-ban, mivel ez már az új createRoot metódust használja.

// ReactJS 17
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// ReactJS 18
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />)

 A React-DOM createRoot metódusának átadjuk az app container div-et , aminek visszatérési értékét rakjuk egy root konstansba, aminek átadhatjuk a komponenst a render metódusán keresztül.

Az unmountComponentAtNode is most már a root egy metódusa lesz, amit root.unmount() paranccsal hívhatunk meg. 

A callback függvény eltávolításra került a render metódusból, így azt a 18-ban már nem lehet használni.
Hogy mit csináljunk helyette? Az alábbi példában megnézheted.

// React17
container = document.getElementById('app');
render(<App tab="home" />, container, () => { console.log('rendered'); }); 
// React18
function AppWithCallbackAfterRender() {
useEffect(() => {
console.log('rendered');
}); return  <App tab="home" />} 
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);

Ha az alkalmazás szerveroldali renderelést használ, akkor a régi kód cseréje az újra így néz ki:

// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, );

Köszönöm, ha elolvastad. Ha bármilyen elírást találsz, főleg a kódokban, akkor kérlek jelezd.