He estado trabajando con reaccionar durante años y todavía tengo una pregunta simple que nunca pude entender ni obtener la respuesta en ningún lado. ¿Es malo llamar a una función externa en el cuerpo del componente de reacción?
Por ejemplo:
import { getUser } from './helpers'; function MyComponent() { const user = getUser(); return ( ... ¿Qué sucederá con la variable de usuario cuando el componente principal vuelva a representar el componente? ¿Las variables creadas en el cuerpo del componente se crean nuevamente en la memoria? ¿Debo usar useCallback o useMemo ? Siento que esas dos funciones de reacción son por otras razones, como cálculos costosos y para evitar la repetición innecesaria de props.
Para responder a su primera pregunta en mi experiencia, nunca he oído hablar de llamar a las funciones externas dentro de un cuerpo de reacción como malas. De hecho, siempre ha sido algo que se alentó especialmente para las funciones auxiliares como en su ejemplo. Definitivamente, hay otras formas de manejar las funciones auxiliares que pueden ser necesarias varias veces (me viene a la mente useContext), pero no veo nada malo en importar una función externa para llamar dentro de un cuerpo de reacción.
En cuanto a lo que le sucede al user en su ejemplo, se restablecería al nuevo retorno de getUser() al volver a procesar cualquier componente.
La variable de user se establecerá en el valor devuelto por getUser() en cada nueva representación. Y, sin embargo, getUser() se ejecutará en cada renderizado.
Los React Hooks son funciones que se use al comienzo del nombre de la función, documentadas aquí .