Entdecken Sie die neuen Funktionen und Codebeispiele von React

React 19 ist da und voller Funktionen, die darauf abzielen, das Entwicklererlebnis und die Anwendungsleistung zu verbessern. Von der Optimierung des Codes bis hin zur Einführung leistungsstarker neuer Hooks festigt React 19 weiterhin seine Position als bevorzugte Bibliothek für die Erstellung moderner Webanwendungen. Lassen Sie uns in die wichtigsten Funktionen eintauchen und anhand praktischer Codebeispiele erkunden, wie sie Ihren Entwicklungsprozess revolutionieren können.

---

Hauptmerkmale von React 19

1. Der React-Compiler

Der neue React Compiler vereinfacht und optimiert Ihren Code, indem er ihn in hocheffizientes JavaScript umwandelt. Dadurch entfällt die Notwendigkeit manueller Leistungsoptimierungen wie Memoisierung, sodass sich Entwickler auf die Entwicklung von Funktionen statt auf die Feinabstimmung der Leistung konzentrieren können.

Beispiel:

// Before: Manual optimization with useCallback
const MemoizedComponent = React.useCallback(() => {
  return <div>Optimized!</div>;
}, []);

// After: Automatically optimized
function Component() {
  return <div>Optimized!</div>;
}

---

2. Serverkomponenten

Serverkomponenten in React 19 reduzieren die Menge an an den Client gesendetem JavaScript, indem sie Komponenten auf dem Server rendern. Dies verbessert die Leistung und ermöglicht schnellere Seitenladevorgänge.

Beispiel:

// ServerComponent.server.jsx
export default function ServerComponent() {
  return <div>This is rendered on the server.</div>;
}

// App.jsx
import ServerComponent from './ServerComponent.server';

function App() {
  return (
    <div>
      <h1>Welcome to React 19</h1>
      <ServerComponent />
    </div>
  );
}

---

3. Aktionen

Aktionen vereinfachen Statusaktualisierungen und Fehlerbehandlung. Durch das Markieren von Funktionen mit einer „Use Action“-Direktive verwaltet React ausstehende Status, Fehler und optimistische Aktualisierungen automatisch.

Beispiel:

function UpdateName() {
  const [name, setName] = useState('');

  const handleSubmit = async () => {
    'use action';
    await updateName(name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

---

4. Neue Hooks: use(), useFormStatus() und useOptimistic()

use() zum Datenabruf

Der use()-Hook ermöglicht es Entwicklern, Versprechen direkt innerhalb von Komponenten zu verarbeiten.

Beispiel:

function DataFetchingComponent() {
  const data = use(fetchData());

  return (
    <div>
      <h1>Data:</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}