React 19 est sorti le 25 avril 2024. Le monde JavaScript évolue si rapidement qu'il peut parfois sembler difficile de suivre le rythme. Mais lorsque ces changements visent à vous faciliter la vie en tant que développeur React, cela vaut la peine d'y jeter un coup d'œil, n'est-ce pas ? Étant donné que React est un élément si important de cet écosystème, il est indispensable de rester à jour.
La meilleure partie de React 19 est qu'il vise à simplifier les choses. Les mises à jour sont conçues pour faciliter l'apprentissage de React et vous permettre de passer plus de temps à créer au lieu de gérer des configurations délicates. Certaines des nouvelles fonctionnalités changent vraiment la donne et pourraient faire une grande différence dans votre façon de travailler, vous ne voulez donc certainement pas les manquer.
J’essaie toujours d’expliquer les choses d’une manière facile à comprendre, sans utiliser de mots compliqués. Cet article ne fait pas exception. Mon objectif est de m'assurer que tout soit clair, alors explorons ensemble les superbes mises à jour de React 19 !
N'oubliez pas que React 19 n'est pas encore tout à fait stable. Actuellement, il s’appelle React Canary. Gardez donc à l’esprit que ce n’est pas réellement recommandé pour la production.
Pour optimiser nos applications React, nous utilisons certaines méthodes intégrées comme useMemo, useCallback ou memo. Cela indique à React de ne pas recompiler le code si les entrées ne changent pas. Mais si vous oubliez d'appliquer la mémorisation, cela entraîne un gaspillage des ressources et de la puissance de calcul de React. Pour résoudre ce problème, React 19 a introduit React Compiler. Le nouveau compilateur de React est l’œil de la nouvelle version de la 19e version. Le nouveau compilateur optimise votre code en arrière-plan, afin que vous puissiez supprimer ces hooks et vous concentrer sur l'écriture de composants React magnifiques et propres.
En bref, vous n'avez pas besoin d'envelopper vos fonctions avec useMemo ou useCallback pour des performances optimisées, et vous n'avez pas non plus besoin d'envelopper votre composant avec memo pour éviter de restituer vos composants.
Parlons du charabia ?!! Avez-vous remarqué à quel point le hook useTransition était à peine mentionné avant la sortie de React 19 ? Ou est-ce juste moi ? Eh bien, c'est du moins ce que j'ai remarqué, notamment parmi les développeurs juniors. Quoi qu'il en soit, laissez-moi vous donner une idée de la façon dont cela fonctionnait dans la version précédente et nous verrons ensuite pourquoi c'est une fonctionnalité si importante maintenant.
useTransition renvoie un tableau avec deux éléments, la fonction startTransition et le booléen isPending. Vous pouvez envelopper vos mises à jour d'état dans la fonction startTransition pour les marquer comme transitions (moins de code de priorité). Ce qui signifie que la partie enveloppée avec startTransition commence à fonctionner une fois les autres tâches continues terminées.
Dans React 18, la fonction startTransition ne prenait pas en charge les fonctions asynchrones directement. Il s'agissait d'une limitation car startTransition était conçu pour marquer les mises à jour comme étant de faible priorité mais ne pouvait pas gérer la logique asynchrone de manière native.
Dans React 19, cette limitation a été corrigée. Désormais, startTransition prend en charge les fonctions asynchrones, ce qui signifie que vous pouvez y effectuer des tâches asynchrones (par exemple, récupérer des données) tout en conservant ces mises à jour marquées comme transitions. Cette amélioration permet une utilisation plus flexible et intuitive de startTransition, ce qui lui donne l'impression d'être une « nouvelle » fonctionnalité même s'il s'agit techniquement d'une amélioration d'une fonctionnalité existante.
?
Par convention, les fonctions qui utilisent des transitions asynchrones sont appelées « Actions ».
Par exemple, vous pouvez gérer l'état d'attente et d'erreur dans useState :
// Before Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(name);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect("/path");
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
React 19 prend en charge l'utilisation de fonctions asynchrones dans les transitions pour gérer automatiquement les états en attente, les erreurs, les formulaires et les mises à jour optimistes. Par exemple, vous pouvez utiliser useTransition pour gérer l'état en attente pour vous :
// Using pending state from Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
})
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
La transition asynchrone définira immédiatement l'état isPending sur true, effectuera la ou les requêtes asynchrones et fera passer isPending à false après toute transition. Cela vous permet de garder l'interface utilisateur actuelle réactive et interactive pendant que les données changent.
L'équipe React a ajouté la prise en charge des fonctions de transmission au fur et à mesure de l'action.
export default function App() {
const [name, setName] = useState(
() => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
)
async function formAction(formData){
try {
const newName = await updateNameInDB(formData.get("name"))
setName(newName)
}
}
return (
<>
<p className="username">
Current user: <span>{name}</span>
</p>
<form action={formAction}>
<input
type="text"
name="name"
required
/>
<button type="submit">Update</button>
</form>
</>
)
}
La fonction formAction (vous pouvez nommer n'importe quoi) vous récupère les données du formulaire dans son paramètre. Chaque champ est désigné par un attribut de nom et vous devez donc être prudent lorsque vous nommez les entrées. le paramètre formData est en fait l'objet natif de l'API Web FormData. Vous pouvez le découvrir sur mdn web docs. Une autre bonne chose est que vous n'avez pas besoin d'appliquer event.preventDefault() car il est géré par React.
Lorsqu'une action de formulaire réussit, React réinitialise automatiquement le formulaire. Mais si vous souhaitez réinitialiser le
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
