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

Suponiendo que la funcionfunción getList, este declarada en el componente como una expresión, comotal cual se muestra en la pregunta:

TambienTambién, se agrega un Set para observar la memoria del componente React, se quieren observar tanto el Componente y useEffect block scopes:

Suponiendo que la funcion getList, este declarada en el componente como una expresión, como se muestra en la pregunta:

Tambien se agrega un Set para observar la memoria del componente React, se quieren observar el Componente y useEffect block scopes:

Suponiendo que la función getList, este declarada en el componente como una expresión, tal cual se muestra en la pregunta:

También, se agrega un Set para observar la memoria del componente React, se quieren observar tanto el Componente y useEffect block scopes:

nombre de variable stackSetUseEffect
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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 espaciostackSetUseEffect de useEffect que solo se crea una función, al cargar el componente y no más (parece un tipo de Memoization):

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):

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):

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

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