Cette semaine, nous parlerons des nouvelles mises à jour et hooks de React 19. Après avoir parcouru et utilisé certaines de ces nouvelles mises à jour, je ne peux qu'admettre que cela a simplifié certaines des activités rigoureuses que les développeurs effectuent lors de la création d'applications, en particulier les applications liées aux formulaires interactifs.

Rejoignez-moi et laissez-nous explorer certaines de ces nouvelles mises à jour.

Compilateur React : le compilateur React sélectionne votre code React, le traduit en code JavaScript pour le navigateur et gère l'état de votre composant ou de votre interface utilisateur. Cette action singulière permet d'optimiser les performances de votre application.

Si vous êtes familier avec le hook useMemo, le hook useCallback et le React.Memo, vous comprendrez qu'ils aident à mémoriser (stockage de valeurs ou de fonctions pour des utilisations futures) vos composants, afin qu'ils n'aient pas à être re- rendu lorsqu'il n'y a aucun changement d'état. Lorsqu'il y a des changements d'état, React restitue le composant en question et ses enfants, et lorsqu'il n'y a aucun changement dans votre code, le composant reste tel quel en conservant la mémoire, la valeur et l'état précédents dans le composant ou le hook pour le futur. les usages; optimisant ainsi les performances de vos composants. C'est exactement ce que le compilateur React fait automatiquement, sans avoir à appeler manuellement l'un des hooks mentionnés ci-dessus.

Actions de formulaire : L'un des plus grands avantages de l'utilisation de React est la la gestion et la mutation de l'état, et cela se produit principalement lorsque nous utilisons éléments. Les formulaires nous aident à créer et à gérer plus efficacement l’interactivité des utilisateurs.

Avec actions de formulaire, vous n'avez pas besoin de gestionnaires d'événements comme onSubmit et onChange pour effectuer une mutation en direct des données, à la place, nous pouvons transmettre un accessoire action à l'élément

const myFunction = async (formData) => {
  const [name, setName] = useState("")

  const updatedName = await nameChange(formData.get("name"))
     setName(updatedName)
}

Avec cette approche, nous n'avons pas besoin de l'application de useState pour muter les données via event.target.value, au lieu de cela, dans myFunction nous pouvons obtenir les données mutées via un argument.

Cela signifie qu'à partir de l'élément de notre formulaire, nous devons définir un attribut de nom. L'utilisation de cette méthode signifie que nous permettons à React de gérer le formulaire lui-même via l'Objet de formulaire React natif au lieu de changer manuellement l'état via les gestionnaires d'événements.

Composants du serveur : React 19 permet de rendre les composants sur un serveur avant le regroupement, dans un environnement distinct de l'application client ou de la configuration du serveur SSR. Les composants serveur ne sont pas les mêmes que SSR (rendu côté serveur), mais un environnement serveur distinct dans les composants React Server.
Cette fonctionnalité permet aux composants d'effectuer un pré-rendu avant l'heure, ce qui entraîne un affichage rapide du contenu et un temps de chargement amélioré.

Métadonnées : React 19 permet des métadonnées flexibles. Les développeurs peuvent gérer les balises titre, description et autres balises méta des composants individuels via le composant DocumentHead. Cela contribuera à améliorer le référencement (Search Engine Optimization).

Const AboutUs = () => {
 return (
    
      
      
      // content
    >
  );
}

React 19 propose une série de nouveaux hooks, certains, nouveaux, d'autres une amélioration des hooks existants. Discutons-en ci-dessous.

Le hook use() : Le hook use est une API expérimentale qui peut directement être utilisée pour lire la valeur d'une promesse ou d'un contexte au sein d'un composant ou d'un hook (ce qui est sa seule limitation connue pour l'instant ).
Le hook use est très polyvalent et peut également être utilisé à la place de useEffect, car il peut être utilisé pour la récupération de données asynchrone. Cela aide à
obtenir un bloc de code plus soigné et concis.

Mise en garde : Il ne remplace pas useEffect car il a toujours ses propres limitations que _useEffect _s'exécutera sans limites.

import {use} from "react"
const fetchData = async () => {
    const response = await fetch("https://........");
    return response.json()
}

const userData = () => {
    const user = use(fetchData());

        return (
    
{user.name}
  );
}

useActionState() : il s'agit d'un nouveau hook qui permet de gérer les changements d'état. Il permet de gérer l'état en attente, la gestion des erreurs et le final
mises à jour de l'état. Le useActionState _fonctionne comme le _useReduce _en ce sens qu'il reçoit deux (2) paramètres : la fonction à appeler lorsque le formulaire est soumis, et un _initialState, et il renvoie un tableau contenant trois (3) valeurs : le state, qui est maintenant l'état actuel s'il y a une mutation de state, une nouvelle action (formAction) qui peut être passée comme accessoire dans notre composant de formulaire pour appeler l'action du serveur, et _isPending _qui renvoie une _valeur _boolean si ou non le le formulaire est soumis.

import { useActionState } from "react";

async function incrementFunction(initialState, formData) {
  return initialState   1;
}

function StatefulForm({}) {
  const [state, formAction, isPending] = useActionState(incrementFunction, 0);

  console.log(state);

  return (
    

À partir de cet exemple, la incrementFunction ajoute 1 à l'état à chaque fois que l'utilisateur clique sur le bouton. Le initialState étant à 0, puis passe à 1 au premier clic du bouton, changeant ainsi l'état à 1, et pour chaque autre clic sur le bouton ajoute 1 au dernier état du composant.

useOptimistic() :

Il s'agit d'un nouveau hook qui permet aux utilisateurs de voir le résultat de leur action avant même le chargement complet des pages. Les pages sont rendues de manière optimiste à l'utilisateur même lorsque le serveur est toujours en mode de récupération de données.

Dans l'espoir que la récupération des données réussira, React affiche le résultat attendu au client, et lorsque la récupération des données échoue, React revient à la valeur de état précédent afin de ne pas afficher de données incorrectes. . Cette action singulière permet un affichage transparent et rapide des données, améliorant ainsi l'expérience utilisateur.

useFormStatus() :

Comme son nom l'indique, useFormStatus nous donne le statut de notre formulaire ou champs de formulaire. Ce hook ne prend aucun paramètre, mais il renvoie certainement 4 objets :

en attente : ceci renvoie une valeur booléenne : true ou false. Il renvoie true lorsque le formulaire est soumis et false lorsque le formulaire est soumis.

data : lorsque le formulaire est soumis avec succès, nous pouvons obtenir les informations de l'utilisateur ou de l'objet à partir du champ du formulaire comme ceci :

(formData.get("name"))
(formData.get("address"))

method : La méthode par défaut d'un formulaire est GET, sauf indication contraire. Nous pouvons obtenir la méthode de notre formulaire avec .method. Lorsque nous soumettons un formulaire, une propriété de méthode de chaîne doit être spécifiée comme POST.

action : Il s'agit d'une référence à la fonction qui sera transmise à l'accessoire d'action dans notre élément .

Le useFormStatus doit toujours être appelé à partir d'un élément ou d'un composant rendu à l'intérieur d'un .

Il y a quelques mises à jour supplémentaires sur lesquelles je ne peux pas vraiment écrire, donc vous ne vous ennuyez pas d'avoir à lire autant. Vous pouvez cliquer sur le site Web React Docs pour consulter certaines des autres mises à jour.

J'espère que vous avez passé un bon moment à apprendre avec moi.

Faites bien de me suivre si vous avez apprécié mes articles.

Merci et bonne semaine à venir mes amis.