1

Tengo un json-server que contiene objetos { "id" : x , "name" : y } el ejercicio es simple, llamar con una función asíncrona y cargar los datos, para ello también he realizado un formulario en un componente, en el cual escribes solo el nombre y se añade de forma asíncrona al json-server.

El problema es cuando una vez que he añadido el nuevo item al json-sever este no se visualiza en cliente hasta que realizo un refresh de la pagina... Mi idea era usar un useEffect para provocar un renderizado en el componente que almacena la carga del servidor json-server de los datos.

Pero al pasar le dicho componente, este realiza llamadas infinitas al servidor reduciendo su eficiencia y haciendo llamadas innecesarias. Como podría solucionarlo ?

Main.js

import React, { useState, useEffect } from 'react';
import MainItem from './MainItem';
import Form from './Form';

function Main(){

    const[customer,setCustomer] = useState([]);

    async function loadData(){
        const url = 'http://localhost:3004/personal';
        const end = await fetch(url);
        const json = await end.json();
        return json;
    }

    useEffect(() => {
        loadData().then(customer => {
            setCustomer(customer);
        })
    },[])

    //Si pasas por el useEffect customer, hace infinitas peticiones al servidor!!!

    return(
        <main>
            <div className="main-container">
                {customer.map(c => <MainItem id={c.id} name={c.name} key={c.id} />)}
            </div>
            <div className="main-container">
                <Form />
            </div>
        </main>
    );
}

export default Main;

MainItem.js

import React from 'react';

function MainItem({id,name}){
    return(
        <div className="item">{name}</div>
    );
}

export default MainItem;

Form.js

import React, { useState } from 'react';

function Form(){

    const[name,setName] = useState("");

    const handleName = (e) => {
        setName(e.target.value);
    }

    async function addName(){
       const newItem = {id : Date.now(), name : name};
       const url = 'http://localhost:3004/personal'; //URL 

       const end = await fetch(url, {method: 'POST', //End point a la URL 
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify(newItem),
       });

       const json = await end.json(); // JSON format
       return json;
    }

    function loadName(){
        addName();
        setName("");
    }

    return(
        <form>
            <input 
            type="text"
            value={name}
            onChange={e => handleName(e)}
            placeholder="Name"
            />
            <input type="button" onClick={loadName} value="Add"  />
        </form>
    );
}

export default Form;

data.json

{
  "personal": [
    {
      "id": 1,
      "name": "Maria"
    }
  ]
}

Si introduces el nombre en el formulario se actualiza en el server pero no se muestra en cliente hasta que no se refresca la pagina como podría hacerlo usando useEffect ?

He probado a introducir esto pero genera infinitas llamadas al server :

useEffect(() => {
     loadData().then(customer => {
         etCustomer(customer);
     })
},[customer])

1 respuesta 1

2

useEffect dependency: comparación por valor vs comparación por referencia

El hook useEffect se esta disparando n veces, porque la referencia de customer que se pasa como dependency, cambia cada vez que ReactJs devuelve el componente nuevamente, nótese que customer es un tipo Array:

//ReactJs: const customer es una nueva referencia en cada devolucion
const[customer,setCustomer] = useState([]);

useEffect(() => {
     loadData().then(customer => {
         etCustomer(customer);
     })
//ReactJs: la referencia customer es diferente, ha cambiado, por lo tanto disparo el efecto
},[customer])

En las dependencias del hook useEffect, se deben listar siempre que sea posible, tipos primitivos (String,Int,Boolean ...etc), de tal forma que useEffect compare igualdad por valor, en vez de comparar igualdad por referencia, como pasa en este caso con el tipo Array (o el resto de los tipos de datos Object y function).


Propuesta

Se puede declarar un nuevo estado con tipo primitivo Boolean que se usará como depenencia de useEffect, su función será actuar como bandera, para saber cuando el usuario a realizado una operación de escritura en el servidor:

 //componente home
 const [reloadData, setReloadData] = useState(false);
        
 useEffect(() => {
     loadData().then(customer => {
         setCustomer(customer);
     })
     //ReactJs: al desmontar el componente regresare la bandera reloadData a su valor inicial
     return ()=>setReloadData(false);
    //ReactJs: dependencia primitiva, voy a comparar igualdad por valor
 },[reloadData])

Luego, se pasa el setter setReloadData como props al componente Form:

<Form reloadHandler={setReloadData}/>

Destructurando propsen componente Form:

function Form({reloadHandler}){
//...code
}

Después, en el componente Form, se llama a reloadHandler y además, se cambia el valor del estado setReload que es un tipo primitivo Boolean, de false a true:

function loadName(){
      addName();
      setName("");
      reloadHandler(true);
  }

Con esto, useEffect se dispará al momento de devolver nuevamente la App, pues el valor de la dependencia reloadData ha cambiado.

Finalmente, se cargan los datos más recientes de customer, solo si el usuario realizó la operación de escritura al server.

Espero que esta respuesta sea de ayuda.

1
  • Genial muchas gracias por la explicación, lo tendré en cuenta para las próximas veces.
    – TALBARA
    Commented el 16 abr. 2021 a las 9:44

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.