React 19 - Demnächst
Zum ersten Mal seit langer Zeit (fast einem Jahr) gab es ein Update auf dem React-Blog.
Natürlich haben sie sich auf anderen Kanälen hauptsächlich auf Entwicklungen im Zusammenhang mit Next.js konzentriert.
Obwohl React 19 noch nicht erschienen ist, deutet diese Ankündigung darauf hin, dass mehrere Themen die ansonsten ruhigen Gewässer der React-Welt aufwühlen könnten.
React-Compiler
Die Ankündigung des React Compilers markiert einen weiteren bedeutenden Schritt in der Entwicklung und verspricht mehr als nützlich zu werden! Es befindet sich nicht mehr nur in der Forschungsphase, sondern kann auch in Produktionsumgebungen eingesetzt werden. Instagram nutzt diese Lösung bereits, und sie wird derzeit in andere Meta-Plattformen integriert. Bald wird es Open Source sein.
Wie wir alle wissen, rendert React Komponenten manchmal etwas zu häufig bei Zustandsänderungen neu. Bisher haben wir versucht, die Auswirkungen dieses Verhaltens mit verschiedenen Optimierungstechniken abzumildern (obwohl diese Techniken manchmal langsamer waren als das einfache Zulassen unnötiger erneuter Renderings...). Wir haben versucht, dies zu vermeiden, indem wir die APIs useMemo, useCallback und memo verwendet haben.
Warum ist der React Compiler dann nützlich?
Die Verwendung des React-Compilers ist nützlich, da er die oben genannten Optimierungsprozesse automatisiert und manuelle Eingriffe überflüssig macht. Dies führt zu schnelleren und effizienteren React-Anwendungen und spart gleichzeitig Zeit und Ressourcen für Entwickler.
Das React-Team betont in dem Beitrag, dass der React-Compiler am besten funktioniert, wenn Ihr Code bestimmte allgemeine Erwartungen erfüllt, wie z. B. das Befolgen der Regeln des React Strict Mode und die Verwendung des React ESLint-Plugins.
Aktionen
Bisher haben wir diese als Serveraktionen bezeichnet, aber das wird sich bald ändern.
Es wird nicht nur für Plattformen wie Next.js möglich sein (sie haben mit Next.js 14 stabile Serveraktionen eingeführt), sondern auch für clientseitige React-Anwendungen.
Da nun die Client-Seite involviert ist, kommen auch Hooks ins Spiel und werden verwendet.
Wir werden ein paar neue Hooks bekommen:
- useFormStatus
- useFormState
- useOptimistic um die Aktionen richtig nutzen zu können.
Beispiel für useFormStatus
import { useFormStatus } from "react-dom";
import action from './actions';
function Submit() {
const status = useFormStatus();
return <button disabled={status.pending}>Submit</button>
}
export default function App() {
return (
<form action={action}>
<Submit />
</form>
);
}
Beispiel für die VerwendungOptimistisch
async function deliverMessage(message) {
await new Promise((res) => setTimeout(res, 1000));
return message;
}
import { useOptimistic, useState, useRef } from "react";
function Thread({ messages, sendMessage }) {
const formRef = useRef();
async function formAction(formData) {
addOptimisticMessage(formData.get("message"));
formRef.current.reset();
await sendMessage(formData);
}
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage) => [
...state,
{
text: newMessage,
sending: true
}
]
);
return (
<>
{optimisticMessages.map((message, index) => (
<div key={index}>
{message.text}
{!!message.sending && <small> (Sending...)</small>}
</div>
))}
<form action={formAction} ref={formRef}>
<input type="text" name="message" placeholder="Hello!" />
<button type="submit">Send</button>
</form>
</>
);
}
export default function App() {
const [messages, setMessages] = useState([
{ text: "Hello there!", sending: false, key: 1 }
]);
async function sendMessage(formData) {
const sentMessage = await deliverMessage(formData.get("message"));
setMessages((messages) => [...messages, { text: sentMessage }]);
}
return <Thread messages={messages} sendMessage={sendMessage} />;
}
Mit Hilfe dieser Hooks kann eine noch bessere User Experience bei der Verwaltung von Formularen erreicht werden.
Neue Funktionen von React Canary-Versionen
Wie zu Beginn des Artikels erwähnt, haben die React-Entwickler ihre neuesten Entwicklungen in letzter Zeit vor allem über andere Kanäle kommuniziert, die sich hauptsächlich auf Next.js beziehen. Bisher waren diese Entwicklungen nur über React Canary-Releases und nicht über stabile Versionen zugänglich. Im Wesentlichen bedeutete dies, dass wir diese Funktionen nur mit Next.j nutzen konnten.
All das soll sich mit React 19 ändern.
"use client" und die "user server"-Direktiven
Es sollte hier beachtet werden, dass React nur React ist, was bedeutet, dass es sich lediglich um eine UI-Rendering-Bibliothek handelt, mehr nicht. Um diese Funktionen nutzen zu können, ist immer noch die Verwendung eines Frameworks oder einer benutzerdefinierten Lösung erforderlich.
Neue HTML-Elemente,
wie <title><meta><link>z.B. ,,, daher wird in Zukunft kein React-Helm mehr benötigt.
Ich persönlich empfinde das als positive Entwicklung. Ich bin froh, dass es alles an einem Ort ist, aber gleichzeitig ist es faszinierend. Warum sollte eine UI-Rendering-Bibliothek wie React plötzlich SEO-Angelegenheiten selbst in die Hand nehmen und sicherstellen wollen? Nun, es scheint, dass sie diese Entscheidung bereits getroffen haben.
Und noch ein paar Dinge, die nicht einmal Teil des Blogbeitragsinhalts waren.
Zum Beispiel können wir endlich forwardRef vergessen (ich bin sehr froh darüber), React.lazy ist aufgrund von React Server Components irrelevant geworden, und die Ankunft des use-Hooks, der die Verwendung von Kontext oder das Warten auf eine Zusage ermöglicht.
Wenn Sie mehr erfahren möchten, besuchen Sie unbedingt die React-Konferenz am 24.
Auf der React-Konferenz, die für den 15. und 16. Mai 2024 geplant ist, werden sicherlich viele dieser Themen weiter vertieft werden.
Wenn jemand teilnehmen möchte, zögern Sie nicht! Sie findet persönlich in Henderson, Nevada, statt oder Sie können online unter https://conf.react.dev/ teilnehmen.
