Dans React, quelle est la différence entre créer une fonction dans useEffect() et l'importer depuis un autre fichier ?

Question

Au travail, je suis tombé sur un code comme celui-ci

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

Ici, nous pouvons voir qu'il existe une fonction appelée updateValues() dans useEffect(), qui peut effectuer plusieurs mises à jour de statut. On m'a dit d'exporter cette fonction vers un autre fichier pour résoudre les problèmes de performances.

// file1.js
export const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };

// Component.js

import { updateValues } from "file1.js";

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

Je me demandais si quelque chose comme ça était réellement un problème dans React ? La documentation officielle de React fournit plusieurs exemples de fonctions dans useEffect(), mais mentionne à peine le garbage collection. Je me demande si le garbage collection détruira correctement les fonctions importées au moment opportun.

Mon hypothèse est que l'importation d'une fonction ou quoi que ce soit d'autre crée quelque chose en mémoire qui y reste même si nous n'en avons pas besoin.

Je ne sais pas si cette question est une question "basée sur l'opinion", car je cherche simplement une explication sur le fonctionnement de la mémoire et du garbage collection dans useEffect() .

Answer 1

La raison pour laquelle il vous est conseillé de faire cela est que votre useEffect est créé à chaque fois que le code du composant s'exécute - ce qui peut être plus souvent qu'il n'est rendu. Toutes ces choses ne sont pas utilisées 90 % du temps où elles sont créées, donc leur création et leur garbage collection sont inutiles. Par conséquent, plus il y a d’éléments pouvant être déplacés en dehors du composant, mieux c’est. Si une fonction importée (ou une fonction que vous créez en dehors d'un composant fonctionnel) est récupérée, cela n'a pas beaucoup d'importance car elle n'est créée qu'une seule fois, alors que tout ce que vous définissez dans un composant est créé des centaines ou des milliers de fois.

Honnêtement, votre fonction et son utilisation sont un peu étranges. Je suppose que ce n'est qu'un pseudocode, car sinon, le corps de votre fonction useEffect serait meilleur, comme ça

setNumber(10);
setSpeed(null);
setAngle(30);

Envisagez également d'utiliser useReducer, qui permet de définir des fonctions en dehors du composant d'une manière que les développeurs peuvent mieux comprendre.