Réagissez aux nouvelles mises à jour

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 que convenir 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 contribue à 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. utilisations; 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 susmentionnés.

Actions de formulaire : L'un des plus grands avantages de l'utilisation de React est la gestion et 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 les 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

qui reçoit une fonction qui déclenche l'événement.

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

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

<form action={myFunction}>
   <input type="name" 
          name="name" _// this is important to be able to get our data //_
   />
   <button type="submit">Submit</button>
</form>

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 name. 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 meta de composants individuels via le composant DocumentHead. Cela contribuera à améliorer le référencement (Search Engine Optimization).

Const AboutUs = () => {
 return (
    <>
      <title>Learn more about our company</title>
      <meta name="AboutUs" description="You can find us on ..." />
      // 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 (
    <div className='username'>{user.name}</div>
  );
}

useActionState() : Il s'agit d'un nouveau hook qui aide à gérer les changements d'état. Il aide à gérer l'état en attente, la gestion des erreurs et la finale
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 (
    <form>
      <button formAction={formAction}>{state}</button>
    </form>
  )
}

From this example, the incrementFunction adds 1 to the state every time the button is clicked. The initialState being 0, and then increases to 1 at the first click of the button, thereby changing the state to 1, and for every other click on the button adds 1 to the last state of the component.

useOptimistic() hook:

This is a new hook that allows users to see the outcome of their action even before the pages load completely. The pages are optimistically rendered to the user even when the server is still in its data fetching mode.

With the hope that data fetching will be successful, React displays the intended result to the client, and when data fetching fails, React reverts to the value of the previous state in order not to display incorrect data. This singular action helps in a seamless and fast display of data thereby improving user experience.

useFormStatus():

As the name implies, useFormStatus gives us the status of our form or form fields. This hook does not take in any parameter, but it sure returns 4 objects:

pending: This returns a boolean value: true or false. It returns true when the form is submitting, and false when the form is submitted.

data: When the form is successfully submitted, we can get the information of the user or object from the form field like this:

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

method: The default method of a form is GET, unless stated otherwise. We can get the method of our form with .method. When we are submitting a form, a string method property should be specified as a POST.

action: This is a reference to the function that will be passed to the action prop in our element.

The useFormStatus must always be called from a element or a component that is rendered inside a .

There's quite a few more updates that I can't really write about, so you don't get bored having to read so much. You can click on the React Docs Website to check out some of the other updates.

I hope you had a great time learning with me.

Do well to follow me if you enjoyed my articles.

Thanks, and have a great week ahead my friends.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!