Quoi de neuf dans React19 ? / Blogs / Perficient

Récemment, React a publié React19 Beta. Il comprend des changements, des mises à jour, des API et des hooks intéressants. Cet article de mise à jour de React 19 couvrira quelques nouveaux hooks importants que nous devons comprendre, ainsi que le code de référence et les instantanés fonctionnels.

Contenu:

• Introduction à Compilateur React.
• Document Métadonnées.
• Re-rendu automatique avec le note, utiliser Mémoet utiliserCallback crochets.
• La gestion des API est devenue plus simple avec l’introduction du utiliser.
• Actions: Une nouvelle fonctionnalité dans React pour interagir avec les éléments du DOM.
• forwardRef devient maintenant la référence, et la référence est un accessoire.
• utiliser(Contexte) au lieu de useContext().

Cet article se concentrera sur nouveaux hooks, mises à jour des hooks existants et des API introduit dans React 19. De plus, nous publierons un article de blog distinct couvrant spécifiquement Rendu côté serveur (SSR) dans React 19. La SSR peut être un sujet complexe pour de nombreux développeurs React, d’autant plus que React est désormais intégré à Next.js pour le rendu côté serveur. Restez à l’écoute pour notre aperçu détaillé de SSR et des fonctionnalités intéressantes de React 19 !

Compilateur de réaction

L’équipe React a introduit le tout nouveau compilateur React pour résoudre l’un des problèmes de React : les problèmes de rendu qui ont un impact sur les performances. Les développeurs utilisent souvent utiliser Mémo, noteet utiliserCallback pour atténuer ces problèmes manuellement. Cependant, l’équipe React a reconnu les limites de cette approche et a décidé de créer le compilateur React. Ce compilateur gérera le re-rendu en interne, éliminant ainsi le besoin pour les développeurs d’implémenter explicitement utiliser Mémo, noteet utiliserCallback.

Actuellement, le compilateur React est utilisé au sein Instagram base de code.

Métadonnées du document

Dans le passé, l’ajout de métadonnées telles que titres et méta descriptions Les candidatures React étaient un processus fastidieux. Les développeurs s’appuyaient souvent sur des packages externes comme ‘réagir-casque’ pour gérer cela. Cependant, avec la sortie de React 19, cette fonctionnalité sera intégrée, permettant aux développeurs d’ajouter facilement du contenu SEO au niveau des composants.

Fragment

export const Home = () => {
    return(
        <>
            <title>Homepage</title>
            <meta name="description" content="This is Hompepage for Meta data" /> 
        </>
    )
}

utiliser l’API

Passons à une explication plus détaillée de utiliser( ) crochet introduit dans React 19.

Objectif et cas d’utilisation

• Le hook use() est conçu pour gérer les cas extrêmes où des promesses, des opérations asynchrones ou un contexte sont impliqués dans les composants React.
• Il fournit un moyen d’utiliser des hooks personnalisés dans des conditions ou des blocs de code spécifiques.
• Cela permet une plus grande flexibilité dans l’utilisation du crochet.
• Le hook use() peut être utilisé dans n’importe quel bloc de code, ce qui facilite la gestion de scénarios complexes.

Exigences d’utilisation

• La fonction qui appelle le utiliser() hook doit être un composant React ou un autre hook personnalisé.
• Si un composant appelant le utiliser() hook est enveloppé dans une limite de suspension, un message de secours est affiché à l’utilisateur jusqu’à ce que le utiliser() le crochet se résout.
• Une fois la utiliser() Hook se résout, le composant restitue automatiquement les données résolues dans l’interface utilisateur.

Extrait de code

import { use } from "react";
const fetchUsers = async () => {
    const res =  await fetch('https://randomuser.me/api/');
    return res.json();
};
const UsersItems = () => {
    const users = use (fetchUsers());
    return (
        <ul>
            {users.map((user)=>{
                <div key={user.id} className="bg-blue-50 shadow-md p-4 my-6 rounded-lg">
                    <h2 className="text-xl font-bold">{user.name}</h2>
                    <p>{email.email}</p>
                </div>   
            })}
        </ul>
    )
};
export default UsersItems;

Actions et

en réaction

Réagir19 apporte une fonctionnalité de puissance connue sous le nom de Actions.

• Dans React, quand surSoumettre() les événements sont appelés, ils sont exécutés côté client. Cependant, avec l’utilisation de Action et ses différents hooks, nous pouvons exécuter l’événement submit sur le du côté serveur.
• L’action peut être exécutée côté client et côté serveur.
• Avec la balise
  
  Top de Formin React, un nouvel attribut est ajouté, c’est-à-dire les actions, donc au lieu d’utiliser surSoumettre()utiliser action.
• Simplification de la gestion des formulaires : Les actions facilitent le traitement des soumissions de formulaires. Vous pouvez mettre à jour les informations de votre page sans la compliquer lorsque quelqu’un remplit un formulaire.
• Faire simple : En intégrant des actions avec la balise HTML
  
  , vous pouvez remplacer l’événement onSubmit traditionnel par des actions. C’est comme rationaliser votre processus !
• Les actions gèrent automatiquement les états en attente, la gestion des erreurs, les commentaires instantanés, etc.

crochet useOptimistic()

• Le utiliserOptimiste() hook est un outil puissant pour gérer les mises à jour optimistes dans React.
• Il vous permet de gérer des scénarios dans lesquels vous souhaitez afficher une valeur à l’utilisateur avant qu’une requête ne soit terminée, même si elle est encore en cours.
• Imaginez un formulaire dans lequel un utilisateur saisit son prénom.
• Généralement, lorsque le formulaire est soumis, vous affichez un chargeur en attendant la réponse du serveur.
• Avec le utiliserOptimiste() hook, vous pouvez immédiatement afficher la valeur réelle saisie par l’utilisateur. Lorsque le serveur répond correctement, la valeur affichée est automatiquement mise à jour pour correspondre à la réponse du serveur.

Crochet useActionState()

• utiliserActionState() est un autre nouveau crochet introduit dans React19.
• Veuillez noter que dans une version Canary, cela s’appelait utiliserFormState.
• utiliserActionState() vous permet de mettre à jour l’état existant en fonction de la réponse de l’action du formulaire.
• utiliserActionState() les hooks attendent les arguments ci-dessous :

Soumettre l’action	Etat de forme initial	Lien permanent
Les actions de soumission sont une fonction qui sera appelée en cliquant sur le bouton de soumission.	Cela contiendra la valeur initiale de votre formulaire.	Cela contiendra la valeur initiale de votre formulaire.
Ceci est nécessaire	Ceci est nécessaire	Ceci est facultatif

forwardRef n’est pas une référence

Auparavant, nous devions utiliser forwardRef pour accéder à la référence dans le composant enfant. Mais forwardRef est maintenant réf dans React19. Voir les exemples ci-dessous :

Veuillez noter que forwardRef sera obsolète et probablement supprimé dans les prochaines versions.

Contexte dans React19

Dans React19, le contexte peut être rendu avec use(Context)

Fragment

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("John Doe");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  const user = use(UserContext);

  return (
    <>
      <h1>Component 2</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

Conclusion

• Dans l’ensemble, la version bêta de React19 a publié de nombreux nouveaux hooks et API ainsi que de nombreuses nouvelles mises à jour des API existantes ; certaines API sont dépréciées.
• Les principaux indicateurs de capture sont utiliser() crochet, Actions, et des crochets avec
  
  Haut du formulaireutilisez Transition est maintenant asynchrone,
• Contexte a été mis à jour auprès du fournisseur ; ainsi, aucun fournisseur explicite n’est nécessaire.

Il y a beaucoup plus dans la boîte pour le rendu côté serveur et ses nouveaux composants et actions serveur, qui seront abordés dans le prochain blog.