update state with another state in functional component-CodePudding

I have a state which needs to be updated everytime when another state changes.So I used used effect with dependencty array item of another state but it is causing infinit render. I want to use these variables as states. I want totalAmount to be a state variable for which other varables are needed to be state(discount subtotal etc.). What could be the solution to this.

App.js

import { useState, useEffect } from 'react';
import './styles.css';

function App() {
  let order = [
    {
      qty: 2,
      name: 'Margarita A',
      variant: 'crab & cucumber',
      price: '412.00',
    }
  ];


  let [discount, setDiscount] = useState(759.5),
    [deliveryFee, setDeliveryFee] = useState(12.0),
    [taxes, setTaxes] = useState(46.15),
    [subtotal, setSubtotal] = useState(0),
    [totalAmount, setTotalAmount] = useState(0);
  useEffect(() => {
    setTotalAmount(subtotal - discount   deliveryFee   taxes);
  }, [subtotal, discount, deliveryFee, taxes]);

  return (
    <div className="app">
      <div className="container">    
          <div className="orderItems">
            {order.map((item, i) => {
              // subtotal  =  item.price;
              setSubtotal((prev) => prev    item.price);

              return (
                <div className="orderItem" key={i}>
                  <span className="orderItemPrice">₹{item.price}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="summary">
          <span className="summaryTitle">Summary</span>
          <div className="total amountBox">
            <span>Total</span>
            <span>₹ {totalAmount}</span>
          </div>
        </div>
      </div>
      <div className="placeOrder">
        <button onClick={(e, totalAmount) => {}}>PLACE ORDER</button>
      </div>
    </div>
  );
}

export default App;

CodePudding user response：

The Problem

the problem is not with your useEffect hook, it's working properly and called once at component did mount. the problem is with the setSubtotal((prev) => prev item.price); in your return method.

Every change on state variables will cause re-rendering, with every re-render your order.map will be recreated. so changing the state during order.map will cause re-render and the re-render cause the order.map to draw again. It's the cause of your infinity re-render.

Note: you can simply comment the setState inside of your map function to stop this behavior.

The Solution

There are some options to control this situation like using useRef for subtotal to prevent the cause of re-rendering.

Also, you can calculate your subtotal inside of your useEffect hook before calculation of totalAmount and setting it.

function App() {
  let order = [
    {
      qty: 2,
      name: "Margarita A",
      variant: "crab & cucumber",
      price: "412.00"
    }
  ];

  const [discount, setDiscount] = useState(59.5);
  const [deliveryFee, setDeliveryFee] = useState(12.0);
  const [taxes, setTaxes] = useState(46.15);
  const [subtotal, setSubtotal] = useState(0);
  const [totalAmount, setTotalAmount] = useState(0);

  useEffect(() => {
    const localSubtotal = order.reduce(
      (acc, curr) => (acc  = Number(curr.price)),
      0
    );

    setSubtotal(localSubtotal);
    setTotalAmount(localSubtotal - discount   deliveryFee   taxes);
  }, [discount, deliveryFee, taxes, order]);

  return (
    <div className="app">
      <div className="container">
        <div className="orderItems">
          {order.map((item, i) => {
            return (
              <div className="orderItem" key={i}>
                <span className="orderItemPrice">₹{item.price}</span>
              </div>
            );
          })}
        </div>
      </div>

      <div>
        <div className="summary">
          <div>
            <span>Sub Total: {subtotal}</span>
          </div>
          <span className="summaryTitle">Summary</span>
          <div className="total amountBox">
            <span>Total</span>
            <span>₹ {totalAmount}</span>
          </div>
        </div>
      </div>
      <div className="placeOrder">
        <button onClick={(e, totalAmount) => {}}>PLACE ORDER</button>
      </div>
    </div>
  );
}

export default App;

Note: don't forget to pass the order array in the array of dependency in useEffect hook.