Skip to main content
3 de 3
se añadieron 11 caracteres en el cuerpo
g.4
  • 3.5k
  • 2
  • 11
  • 22

Comparto mis notas.


Suponiendo que la función getList, este declarada en el componente como una expresión, tal cual 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);
  })

También, se agrega un Set para observar la memoria del componente React, se quieren observar tanto 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 stackSetUseEffect 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

g.4
  • 3.5k
  • 2
  • 11
  • 22