He visto algunos de los ejemplos como
useEffect(() => { const getData = () : void => { console.log("getData") } getData() }, []); Pero puedo poner la función fuera de useEffect con el mismo resultado.
const getData = () : void => { console.log("getData") } useEffect(() => { getData() }, []);Cual es la diferencia entre estos 2?
Una diferencia es que, si declara la función fuera del gancho de efecto, cada vez que el componente se vuelve a renderizar, el objeto de función se creará de nuevo. Por el contrario, declarar la función dentro significa que esa función solo se crea cuando se ejecuta el gancho. (Sin embargo, la función en línea anónima que se pasa a useEffect todavía se crea en cada renderizado...) Realmente no vale la pena preocuparse, pero es una diferencia.
La razón principal por la que algunos prefieren declarar la función dentro del gancho de efecto es para restringir el alcance tanto como sea posible, si lo hace
const fn = () => ... useEffect(fn, []) // lots more code Entonces, algunos lectores del código pueden (muy razonablemente) preocuparse de que // lots more code contenga una referencia a fn , que no se puede determinar sin leer todo // lots more code . Restringir su getData solo dentro del gancho de efecto hace que la intención de la función sea más fácil de entender de un vistazo, especialmente en un componente grande.