title: Can I improve performance of a PUT request in React?
body: <p>I am using a json-server where I store my database in JSON objects. At some point, I have to update all the values in one of those objects, which is an array. The problem is that when I apply that function that updates the values, the server shuts down. I know that this is happening because I am interacting with the server in a for loop, and I suppose that this is not the best way to do that communication with the server. Here's the code:</p>
  
  <p>The reducer: </p>
  
  <pre><code>import * as ActionTypes from './ActionTypes';
  
  export const Inventario = (state = { errMess: null, inventario: []}, action) =&gt; {
    switch (action.type) {
     case ActionTypes.EDIT_INGREDIENTE:
        return {...state, inventario: state.inventario.map((item) =&gt; item.id === action.payload.id ? 
                   action.payload : item)};
     default:
        return state;
    }
  }
  </code></pre>
  
  <p>Action Creator:</p>
  
  <pre><code>export const editIngrediente = (ingrediente) =&gt; ({
      type: ActionTypes.EDIT_INGREDIENTE,
      payload: ingrediente
  });
  
  export const putIngrediente = (ingredienteId, nombreIngrediente, costo, disponible, conversiones) =&gt; (dispatch) =&gt; {
  
      const newIngrediente = {
        id: ingredienteId,
        ingrediente: nombreIngrediente,
        costo: costo,
        disponible: disponible,
        conversiones: conversiones
      };
  
      return fetch(baseUrl + 'inventario/' + ingredienteId, {
          method: "PUT",
          body: JSON.stringify(newIngrediente),
          headers: {
            "Content-Type": "application/json"
          },
          credentials: "same-origin"
      })
      .then(response =&gt; {
          if (response.ok) {
            return response;
          } else {
            var error = new Error('Error ' + response.status + ': ' + response.statusText);
            error.response = response;
            throw error;
          }
        },
        error =&gt; {
              throw error;
        })
      .then(response =&gt; response.json())
      .then(response =&gt; {dispatch(editIngrediente(response)); console.log('editado con exito')})
      .catch(error =&gt;  { console.log('put ingrediente', error.message); alert('Your ingredient could not be posted\nError: '+error.message); });
  };
  
  </code></pre>
  
  <p>And finally where I applied the code:</p>
  
  <pre><code>function restarIngrediente(ingrediente){
          for (var elem of ingrediente){
            var restar = elem.gramos;
            var enInventario = inventario.filter((inven) =&gt; inven.ingrediente === elem.ingrediente)[0];
            var restante = enInventario.disponible - restar;
            putIngrediente(enInventario.id, enInventario.ingrediente, enInventario.costo, restante, enInventario.conversiones);
          }
        }
  </code></pre>
  
  <p>Another doubt that I have is that when I want to update the object, I have to pass to the fetch all the attributes of the object, and not only the one that I actually want to change.</p>
  
  <p>If someone can help me, I'd really appreciate it. </p>