Comparto mis notas.
Suponiendo que la funcion getList
, este declarada en el componente como una expresión, como se muestra en la pregunta:
const getList = () => {
fetch('https://pokeapi.co/api/v2/pokemon?limit=15&offset=100')
.then(res => res.json())
.then(list => getPokemons(list.results))
.catch(e => console.log(e))
}
getList()
Enseguida, se crea un hook useEffect
para ejecutar una función any
:
React.useEffect(()=>{
let any = ()=>{
console.log("useEffect stack");
}
stackSetUseEffect.add(any);
//console.log("stackSetUseEffect", stackSetUseEffect.size);
})
Tambien se agrega un Set
para observar la memoria del componente React, se quieren observar el Componente y useEffect
block scopes:
let stackSetComponent = new Set();
let stackSetUseEffect = new Set();
useEffect a stack
Con estos cambios, se observa que se esta creando una nueva función getList
en memoria del componente, por cada devolución del componente (re-render) y además, useEffect
por si solo presenta el mismo comportamiento:
let stackSetComponent = new Set();
let stackSetUseEffect = new Set();
function App(){
const [Datos, SetDatos] = React.useState([]);
const [clickNumber, setClick] = React.useState(0);
React.useEffect(()=>{
let any = ()=>{
console.log("useEffect stack");
}
stackSetUseEffect.add(any);
//console.log("stackSetUseEffect", stackSetUseEffect.size);
})
let getList = () =>{
console.log("A stack");
}
//re-render
const handler = () => {
setClick(clickNumber + 1);
}
stackSetComponent.add(getList);
//console.log("stackSetComponent: ", stackSetComponent.size)
//return null;
return (
<React.Fragment>
<p>Estado actual Numero de clicks:{clickNumber}</p>
<p>Estado actual stackSetComponent:{stackSetComponent.size}</p>
<p>Estado actual stackSetUseEffect:{stackSetUseEffect.size}</p>
<button onClick={handler} >Click me</button>;
</React.Fragment>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="root"></div>
useEffect con dependencias para controlar el stack
Ahora bien, se puede configurar useEffect
para ejecutar una sola vez, al cargar el componente, agregando un array vacio como su lista de dependencias ; se observa en el espacio de useEffect
que solo se crea una función, al cargar el componente y no más (parece un tipo de Memoization):
let stackSetComponent = new Set();
let stackSetUseEffect = new Set();
function App(){
const [Datos, SetDatos] = React.useState([]);
const [clickNumber, setClick] = React.useState(0);
React.useEffect(()=>{
let any = ()=>{
console.log("useEffect stack");
}
stackSetUseEffect.add(any);
//console.log("stackSetUseEffect", stackSetUseEffect.size);
}, [])
let getList = () =>{
console.log("A stack");
}
//re-render
const handler = () => {
setClick(clickNumber + 1);
}
stackSetComponent.add(getList);
//console.log("stackSetComponent: ", stackSetComponent.size)
//return null;
return (
<React.Fragment>
<p>Estado actual Numero de clicks:{clickNumber}</p>
<p>Estado actual stackSetComponent:{stackSetComponent.size}</p>
<p>Estado actual stackSetUseEffect:{stackSetUseEffect.size}</p>
<button onClick={handler} >Click me</button>;
</React.Fragment>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="root"></div>
Con este analisis, se podria argumentar también el problema del rendimiento.
Espero que esta respuesta sea de ayuda