2

Tengo esta duda, hace unos días tuve una entrevista técnica para un trabajo react jr y me pidieron implementar una petición con una promesa a una API, lo hice de esta forma:

const MainTrial = () => {
    const [pokemons, getPokemons] = useState(null)
    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()
    return (
        <div>
            <ul>
                {pokemons && pokemons.map(pokemon => (
                    <li key={pokemon.name}>{pokemon.name}</li>
                ))
                }
            </ul>
        </div>
    )
}

export default MainTrial

funciona, pero la persona que me entrevistó me preguntó por qué no utilicé useEffect. No supe mi respuesta. En resumen, él me dijo que en un entorno de producción esto seria un problema de rendimiento, no entró en más detalles. Cuando tuve tiempo lo volví a implementar, esta vez con useEffect:

const MainTrial = () => {
    const [pokemons, getPokemons] = useState(null)
    const url = 'https://pokeapi.co/api/v2/pokemon?limit=15&offset=100'
    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(list => { console.log(list.results); getPokemons(list.results) })
            .catch(e => console.log(e))
    }, [url])
    return (
        <div>
            <ul>
                {pokemons && pokemons.map(pokemon => (
                    <li key={pokemon.name}>{pokemon.name}</li>
                ))
                }
            </ul>
        </div>
    )
}

Pero ahora tengo la pregunta de cuándo utilizarlo y cuándo no, soy relativamente nuevo en react y todavía no encuentro la respuesta.

0

2 respuestas 2

2

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

1

En React todo lo que está dentro de la función de un componente se ejecuta cada vez que este componente se vuelve a renderizar. Cómo sabemos los componentes en react por defecto se vuelven a renderizar cada vez que cambia alguno de sus estados, props o el de alguno de sus padres.

En tu primer caso estarías realizando una petición api en cada renderizado del componente, y tengo que decir que estos rerenderizados son muy comunes en React ya que suelen cambiar mucho los estados, puedes comprobarlo con un console.log() para ver cada vez que se llamaría la petición y aunque actualmente no se produzca ningún renderizado extra no sabes si algún añadido adicional posterior los produciría.

Con useEffect puedes controlar bajo qué condiciones se ejecuta la función de dentro del useEffect, por ejemplo que solo se ejecute la llamada de la api la primera vez que el componente se renderiza y no las siguientes ([] como segundo parámetro de useEffect) o cuando cambia específicamente una prop o estado, por ejemplo si la pantalla cambia de tamaño o si se ha cambiado algún dato de algún input, estos parámetros que deben cambiar para que se ejecute el useEffect se indican en el [] del useEffect.

Espero aclarar tu pregunta y estoy abierto a ampliar la información si hay alguna imperfección en la explicación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.