React Version 18 Neuerungen

React Version 18 Neuerungen

React gehört zu den javaScript-Frameworks die sich immer größerer Beliebtheit erfreuen. Mit Version 18 wurden viele interesante Neuerungen eingeführt. In diesem Artikel werden wir uns einige der wichtigsten davon einmal genauer ansehen und ihre Funktionsweise durch kurze TypeScript-Beispiele veranschaulichen.

Concurrent Mode

Der Concurrent Mode ist zweifellos eines der am meisten diskutierten Features von React 18. Er ermöglicht es React, mehrere Komponenten gleichzeitig zu rendern, was zu einer besseren Performance führen kann.

Aktivieren des Concurrent Mode:

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

const App = () => {
  return <h1>Willkommen bei React 18!</h1>;
};

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

In diesem einfachen Beispiel wird `ReactDOM.createRoot()` verwendet. Diese Funktion aktiviert automatisch die Nutzung des parallelen Renderings. **Automatisches Batching** Das automatische Batching ist ein weiteres, für Entwickler sehr interesantes Feature, das dazu beiträgt, die Leistung von React-Anwendungen weiter zu optimieren. Bereits React 17 konnte eine vereinfachte Form des Batching durchführen. Hier wurden alle Hooks innerhalb eines Events zusammengefaßt, so dass diese nur ein Render-Ereignis auslößten. In React 18 ist es jetzt auch zusätzlich möglich Hook-Aufrufe und Zustandsänderungen in Asynchronen Operationen sowie Timeouts zu einem Batch zusammen zu fassen, so dass nur ein einziger Render-Cycle ausgeführt wird.

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('Max');
  const [age, setAge] = useState(25);

  // seit react 17 in nur einem Render-Batch
  const handleEventUpdate = () => {
    setName('Lena');
    setAge(28);
  };

  // ab react 18 in nur einem Render-Batch zusammengefaßt
  const handleAsyncUpdate = async () => {
    await fetchSomeData(); // Eine asynchrone Funktion
    setName('Anna');
    setAge(30);
  };

  // auch ab react 18 in nur einem Render-Batch zusammengefaßt
  const handleTimeoutUpdate = () => {
    setTimeout(() => {
      setName('Lena');
      setAge(28);
    }, 1000);
  };

  return (
    <div>
      <p>Name: {name}</p>
      <p>Alter: {age}</p>
       <button onClick={handleEventUpdate}>Nach Event aktualisieren</button>
      <button onClick={handleTimeoutUpdate}>Nach Timeout aktualisieren</button>
      <button onClick={handleAsyncUpdate}>Asynchron aktualisieren</button>
    </div>
  );
}

Neue APIs: startTransition

Die startTransition API ist ein weiteres Feature von React 18. Es ermöglicht Entwicklern, Übergänge zwischen verschiedenen Zuständen darzustellen, ohne dabei die UI zu blockieren. Alerdings sind hierbei einige Punkte zu beachten:

• Es ist ncht möglich zu ermitteln, ob eine Transtion in Gange ist.
• Die Funktion die an startTransition übergeben wird muss synchron sein.
• Transitionen werden von regulären StateUpdates unterbrochen !
• Mehrere Transition werden zu einem Batch zusammengefasst.

Beispiel in TypeScript:

import { useState, startTransition } from ‘react’;

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => {
        startTransition(() => {
          setCount(count + 1);
        });
      }}>
        Erhöhen
      </button>
    </div>
  );
}

In diesem Beispiel wird startTransition verwendet, um den Zustandsübergang beim Klicken auf den Button zu steuern.

Serverseitiges Rendering mit Suspense

React 18 führt auch das Streaming von serverseitigem Rendering mit Suspense ein. Dies ermöglicht es den Entwicklern, Inhalte schrittweise zu laden, was auch die Performance und Benutzerfreundlichkeit verbessert.

Beispiel in TypeScript:

import React, { Suspense } from ‘react’;

const Komponente = React.lazy(() => import(‘./Komponente’));
function App() {
  return (
    <div>
      <Suspense fallback={<div>Laden…</div>}>
        <Komponente />
      </Suspense>
    </div>
  );
}

In dem Beispiel wird React.lazy() und Suspense verwendet, um eine Komponente asynchron zu laden.

Fazit

Mit der Version React 18 kommen neue und interesante Features auf uns Webentwickler zu. Mit den neuen Funktionen und Verbesserungen noch leistungsstärkere und reaktionsfähigere Anwendungen erstellt werden.