Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

173
Vistas
Too many Re-renders React JS

Can anyone tell me what is wrong with this code pls ?

    import React, { useState } from "react";

const Createcolumn = () => {
  const [sum, setSum] = useState('');
  const [dailySum, setDailySum] = useState(0);
  const [daysOfWork, setDaysOfWork] = useState(0);
  const [fare, setFare] = useState(0);
  const dailySumHandler = (e) => {
    setDailySum(Number(e.target.value));
  };

  const daysOfWorkHandler = (e) => {
    setDaysOfWork(Number(e.target.value));
  };

  const fareHandler = (e) => {
    setFare(Number(e.target.value));
  };

  setSum(dailySum * daysOfWork + fare);

  return (
    <div>
      <div className="column">
        <h1>Name</h1>
        <h1>Daily</h1>
        <h1>Days of Work</h1>
        <h1>Fare</h1>
        <h1>Total</h1>
      </div>
      <div className="column">
        <div>
          <h1>Nodirbek</h1>
        </div>
        <div>
          <input type="text" onChange={dailySumHandler} />
        </div>
        <div>
          <input type="text" onChange={daysOfWorkHandler} />
        </div>
        <div>
          <input type="text" onChange={fareHandler} />
        </div>
        <div>
          <h1>{sum}</h1>
        </div>
      </div>
    </div>
  );
};

export default Createcolumn;

I cannot set my Sum to h1, it is saying too much render I tried to make a function as well, but it doesn't work either

I cannot set my Sum to h1, it is saying too much render I tried to make a function as well, but it doesn't work either

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

The problem is you're calling this directly into your render

setSum(dailySum * daysOfWork + fare);

Once setSum gets triggered, it will cause UI re-rendering which calls render function again. And again setSum will continue being called (it's like deadlock)

Here is a possible fix

import React, { useState } from "react";

const Createcolumn = () => {
  const [dailySum, setDailySum] = useState(0);
  const [daysOfWork, setDaysOfWork] = useState(0);
  const [fare, setFare] = useState(0);
  const dailySumHandler = (e) => {
    setDailySum(Number(e.target.value));
  };

  const daysOfWorkHandler = (e) => {
    setDaysOfWork(Number(e.target.value));
  };

  const fareHandler = (e) => {
    setFare(Number(e.target.value));
  };

  return (
    <div>
      <div className="column">
        <h1>Name</h1>
        <h1>Daily</h1>
        <h1>Days of Work</h1>
        <h1>Fare</h1>
        <h1>Total</h1>
      </div>
      <div className="column">
        <div>
          <h1>Nodirbek</h1>
        </div>
        <div>
          <input type="text" onChange={dailySumHandler} />
        </div>
        <div>
          <input type="text" onChange={daysOfWorkHandler} />
        </div>
        <div>
          <input type="text" onChange={fareHandler} />
        </div>
        <div>
          <h1>{dailySum * daysOfWork + fare}</h1>
        </div>
      </div>
    </div>
  );
};

export default Createcolumn;
about 4 years ago · Juan Pablo Isaza Denunciar

0

You can't use calls to hook setters in the body of the function, it'll cause a rerender, which will cause a rerender, which will cause rerender, and so and so forth.

Instead initialize your value when you call the hook: const [sum, setSum] = useState(dailySum * daysOfWork + fare);

about 4 years ago · Juan Pablo Isaza Denunciar

0

You have to use arrow function notation while calling those functions and pass the event that's what's causing re-renders.

Your code:

 </div>
        <div>
          <input type="text" onChange={dailySumHandler} />
        </div>
        <div>
          <input type="text" onChange={daysOfWorkHandler} />
        </div>
        <div>
          <input type="text" onChange={fareHandler} />
        </div>

Fix:

 </div>
        <div>
          <input type="text" onChange={(e) => dailySumHandler(e)} />
        </div>
        <div>
          <input type="text" onChange={(e) => daysOfWorkHandler(e)} />
        </div>
        <div>
          <input type="text" onChange={(e) => fareHandler(e)} />
        </div>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda