How to update several states at the same time if their value depend on each other with react hooks-CodePudding

I have a button and on button click I need to update several states. Other states like Salary or employerCompensationDays/insuranceCompensationDays I do update and it works. I use useState with an object to update several states, but their values depend on each other, so I need several clicks to update all of them. How could I update all of them with only one click?

import React from "react";
import { useState } from "react";

const Calculator = () => {
  const [salary, setSalary] = useState(0);
  const [employerCompensationDays, setEmployerCompensationDays] = useState(0);
  const [insuranceCompensationDays, setInsuranceCompensationDays] = useState(0);
  const [compensation, setCompensation] = useState({ dayliAllowance: 0, emoloyerCompensation: 0, insuranceCompensation: 0, compensationTotal: 0 })


  const handleCompensation = () => {
    setCompensation({
      dayliAllowance: ((salary / 20) / 100) * 70,
      emoloyerCompensation: compensation.dayliAllowance * employerCompensationDays,
      insuranceCompensation: compensation.dayliAllowance * insuranceCompensationDays,
      compensationTotal: compensation.emoloyerCompensation   compensation.insuranceCompensation
    })
  }
  return (
    <div>
      <button onClick={handleCompensation} className="calculator-btn" type='button'>Calculate</button>
    </div>
  )
}

export default Calculator;

CodePudding user response：

I would use a useMemo instead of state for such cases since the only value you manipulate is salary.

The cons of the way you are doing is, setting state 4 times will means you will re-render min of 4 times.

Below method only render once.

const updateSalary = (amount) => {
     .... some some stuff
     setSalary(finalamount) //this will trigger useMemo below.
} 
const calculated = useMemo(() => {
      const dayliAllowance = ((salary / 20) / 100) * 70;
      const emoloyerCompensation = dayliAllowance * employerCompensationDays;
      const insuranceCompensation = dayliAllowance * insuranceCompensationDays,
      const compensationTotal =compensation.emoloyerCompensation   insuranceCompensation

      return { dayliAllowance, emoloyerCompensation, insuranceCompensation, compensationTotal } 

},[salary]) //when salary changes, this will be recalculated

     return <div>{calculated.daliAllowance}</div> //example

CodePudding user response：

I think if you separate your calculations, you can do the state setting with one click.

import React from "react";
import { useState } from "react";

const Calculator = () => {
  const [salary, setSalary] = useState(0);
  const [employerCompensationDays, setEmployerCompensationDays] = useState(0);
  const [insuranceCompensationDays, setInsuranceCompensationDays] = useState(0);
  const [compensation, setCompensation] = useState({
    dayliAllowance: 0,
    emoloyerCompensation: 0,
    insuranceCompensation: 0,
    compensationTotal: 0
  });

const calculate = () => {
    const dayliAllowance = (salary / 20 / 100) * 70;
    const emoloyerCompensation = dayliAllowance * employerCompensationDays;
    const insuranceCompensation = dayliAllowance * insuranceCompensationDays;
    const compensationTotal = emoloyerCompensation   insuranceCompensation;

    return {
      dayliAllowance,
      emoloyerCompensation,
      insuranceCompensation,
      compensationTotal
    };
  };

  const handleCompensation = () => {
    const result = calculate();

    setCompensation({
      ...result
    });
  };

  return (
    <div>
      <button
        onClick={handleCompensation}
        className="calculator-btn"
        type="button"
      >
        Calculate
      </button>
    </div>
  );
};

export default Calculator;