React updating state causes infinite loop-CodePudding

I have this code where I have a function that adds up the number to the state named 'total' and it also returns a div element with the 'temp'

    const showDiscounted = (price) => {
    const temp = Math.ceil((price * ((100 - discount) / 100)) / 36)
    const newState = discountedTotal.map((t, i) => i === option? t   temp : t)
    setTotal(newState); //this causes infinte loop
    return (
        <div className="col-2">
            {temp}
        </div>
    )
}

I realize that setTotal(newState) is causing an infinite loop because when it gets updated, it re-renders > causes the function 'showDiscounted' to be called again > state gets updated > and it just goes on forever.

I know that I have to use useEffect to stop this issue, but I'm just not quite sure how I can implement it. I've thought about using useRef because it doesn't cause rerender, but I need it rerender to show the state 'total' somewhere else. What is the best way going about this?

CodePudding user response：

You can create a separate component and pass setTotal to that component to stop infinite rerendering.

const ShowDiscounted = ({price, setDisplayData}) => {
  
  const temp = price* 100;
  
  setDisplayData(temp); //this causes infinte loop
  return (
      <div>
          Price: {price}
      </div>
  )
}

export default function App() {
  const [displayData, setDisplayData] = useState(10)
  return (
    <div>
      Total: {displayData}
      <ShowDiscounted setDisplayData={setDisplayData} price={20}/>
    </div>
  );
}

Demo https://stackblitz.com/edit/react-pze8fq

CodePudding user response：

You could solve this problem with useEffect, wrapping your existing logic with it.

useEffect(() => {
  const temp = Math.ceil((price * ((100 - discount) / 100)) / 36)
  const newState = discountedTotal.map((t, i) => i === option? t   temp : t)
  setTotal(newState);
}, [price]); // <-- this is the dependency array,
             //     so the useEffect only runs when any value in this array changes;

Have a look in the documentation (Using the Effect Hook)