UseEffect Comment ignorer le rendu initial et déclencher uniquement après tout changement de dépendance

J'espère que vous allez bien, je vois que vous êtes un peu frustré par le bit useEffect, mais ne vous inquiétez pas, réparons-le ensemble et résolvons le problème.

Pourquoi Heppen : Mon mec useEffect est vraiment simple : il s'exécute également après le JSX chaque fois qu'une valeur de son tableau de dépendances change. mais parfois useEffect se déclenche même si les données du tableau de dépendances n'ont pas changé. Cela se produit en raison du rendu initial.

Solution : la mienne pourrait être une approche différente de la vôtre. Si je fais une erreur, dites-le-moi et oui, cela fonctionne, alors plongeons-nous

Étape 1 : créer 2 useref dans mon cas son composantA.tsx
Nous utiliserons deux références pour contrôler le comportement de rendu initial :

const skippedInitialRender = useRef(false);
const wasInitialRender = useRef(false);

Étape 2 : créer le useEffect

useEffect(() => {
        if(skippedInitialRender.current) {
            // After the first render, the value changes and this block will run
        }
        const currentTimeout = setTimeout(() => {
            wasInitialRender.current = true;
            skippedInitialRender.current = true;
        }, 200);
        return () => clearTimeout(currentTimeout);
    }, [value])

*Étape 3 : * exécutez votre logique à l'intérieur de l'instruction if et c'est fait

*Explication : * Lors du rendu initial, nous retardons l'exécution en utilisant setTimeout. Cela garantit que peu importe le nombre de déclenchements de useEffect lors des rendus initiaux (2, 4 ou plus), notre logique ne fonctionnera pas. La logique ne s'exécute que lorsque la valeur de dépendance change à nouveau après le rendu initial.

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!