Hook useIsomporphicEffect de React

Introduction

Dans ce laboratoire, nous allons explorer l'utilisation du hook useIsomorphicEffect dans React. Ce hook permet de résoudre useEffect() sur le serveur et useLayoutEffect() sur le client, garantissant que le même effet est exécuté indépendamment de l'environnement. Grâce à ce laboratoire, nous apprendrons à utiliser le hook useIsomorphicEffect pour créer des effets cohérents et fiables dans nos applications React.

Skills Graph

React useIsomporphicEffect Hook

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Pour vous assurer d'utiliser correctement useEffect() sur le serveur et useLayoutEffect() sur le client, vous pouvez utiliser typeof pour vérifier si l'objet Window est défini. Si c'est le cas, renvoyez useLayoutEffect(), sinon renvoyez useEffect(). Voici un exemple de mise en œuvre de cela :

const useIsomorphicEffect =
  typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;

Ensuite, dans votre code, vous pouvez utiliser useIsomorphicEffect() comme dans cet exemple :

const MyApp = () => {
  useIsomorphicEffect(() => {
    window.console.log("Hello");
  }, []);

  return null;
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Cela affichera 'Hello' dans la console lorsque le composant est monté et fonctionnera correctement sur le serveur et le client.

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire sur le hook React useIsomporphicEffect. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.