CODEWITHSUNDEEP
javascriptreactjsreact-hooks
program_bumble_bee
program_bumble_bee

Reputation: 305

React hook re-rendering error on state update

In my application, I need to map an array of objects which contain the material UI range slider for each of the row data indexes. On changing the value of the one of the range slider (left button of left and right slider buttons), the value slid/selected needs to be updated into the field named new count of another table.

Also, the value obtained from the slider, suppose, 10 selected, it needs to be multiplied with the key score_impact (from an array of objects). The value obtained after multiplication, updated_risk_score needs to be passed to the gauge component, so that it's needle will move according to that value. The method is followed for every row of the data table containing the range slider.

The issue I am facing is whenever I try to update the state with updated_risk_score inside the iteration/mapping, it gives an error namely, Too many re-renders. React limits the number of renders to prevent an infinite loop. I tried to compare the change in value and then only update the state but the error still persists. It is also not able to persist the updated value for the gauge even after using local storage for the same purpose.

Here is the working snippet of the code:

https://codesandbox.io/s/recursing-mclean-f9uej?file=/src/main.js

I have been stuck at this issue for quite long, as I am new to using hooks. Any help to fix this soon is appreciated.

Thanks in advance.

Upvotes: 0

Views: 61

Answers (1)

Vagan M.
Vagan M.

Reputation: 463

setRiskScore(updated_risk_score); When you`re using useState and set the value your component is rerendering. In you situation setRiskScore() is updating the state every time and after every re-render you call it again

UPD.

if (value_selected && value_selected.index === i) {
   percent_diff = formatPercent(percentValue.value, ele.current_count);
   updated_risk_score = Math.abs(ele.score_impact) * percentValue.value;
   if (updated_risk_score !== riskScore) {
       setRiskScore(updated_risk_score);
   }
   renderNewValue = Number(value_selected.value);
} else {
   renderNewValue = ele.current_count;
}

Upvotes: 1

Related Questions