Les dérivations dynamiques et leur façon de tuer useEffect

Le titre fait un peu « appât à clics », mais l'idée n'est pas fausse.

Je ne pense pas que useEffect soit un mauvais crochet, en fait c'est tout le contraire. Mais dans React, qui fonctionne comme une machine de dérivation, utiliser useEffect pour la synchronisation d'état n'est pas la meilleure option et n'est pas recommandé par l'équipe principale.

Mais attendez, et si j'ai le cas où je dois synchroniser un état ?

Oui, ce sont des cas très rares et il existe peut-être de meilleures options de solution, mais imaginez que nous avons une publication dans une application et que nous voulons avoir un état local pour gérer les mises à jour optimistes, lorsque l'utilisateur clique sur le bouton J'aime, mais que cela se synchronise avec l'état externe (venant du backend) pour vraiment savoir si la même chose s'est produite.

Dérivations mutables

C'est un cas où nous avons besoin d'une primitive où nous pouvons faire de l'état et de la dérivation en même temps. D'un point de vue conceptuel, nous pouvons le considérer comme une dérivation mutable. Ryan Carniato a un bon article de blog à ce sujet, mais il existe certaines limitations liées à la manière dont React gère la réactivité, mais cette nouvelle primitive serait une dérivation et un état en un seul :
Dérivation comme comportement par défaut, obtenant la dernière source de vérité mise à jour (l'accessoire de données provenant du serveur).
Indiquez quand l'utilisateur clique sur le bouton J'aime. Ce changement est temporaire et sera écrasé lors du prochain changement de dépendances.

On ne l'a pas sur React, bien sûr, mais on peut imaginer une primitive comme ça. Les points positifs de celui-ci :

• il supprime un cas d'utilisation supplémentaire de useEffect.
• cela montre clairement que nous avons une dérivation qui peut être traitée comme un état.

utiliserMemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

Le hook accepte deux arguments comme un useMemo normal, le premier étant la fonction memo, qui s'exécuterait normalement la première fois, la valeur renvoyée sera l'état. Le deuxième argument est le tableau bien connu de dépendances, pour garder une trace des valeurs et recalculer le mémo si nécessaire. Il renvoie un tuple avec deux valeurs, la valeur état/mémo et le setter qui changerait temporairement l'état.

L'utilisation du crochet ressemblerait à cet exemple :

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    

      
name: {internalState?.title}
      
{internalState?.like ? "liked post" : "not liked post"}
       {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button
    
  )
}

De cette façon, vous supprimez le besoin d'un useEffect ici, sachant exactement ce que ce hook fait et est capable de faire, et comblez ce vide conceptuel, où notre problème a besoin à la fois d'un état et d'une dérivation. Ironiquement, cela supprime en conséquence le besoin d’un effet.

Comment pouvons-nous faire quelque chose de similaire dans React ?

Afin de suivre les règles de React et de garantir la sécurité du hook, nous devrons utiliser useEffect pour créer quelque chose de similaire dans React d'aujourd'hui. Je ne pense pas qu'un crochet comme celui-là sera fabriqué à l'avenir, mais qui sait, n'est-ce pas ?

Pour éviter l'utilisation de useEffect ici, nous devrons utiliser du code externe comme une mini bibliothèque d'états pour le gérer, ou si nous voulons conserver des primitives React strictes, utiliser useRef pour maintenir la synchronisation des valeurs.

Le problème avec cette approche est qu'elle enfreint les règles de React et qu'elle n'est pas recommandée par la documentation. Parce que la seule façon pour que cela fonctionne sans effet serait de synchroniser les références pendant le rendu du composant, ce qui n'est pas sûr du tout.

Donc, pour faire simple et sûr, un exemple de hook serait comme ça :

const [internalState, setInternalState] = useMemoState(() => data, [data]);

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!