Too many re-renders. React Limits the number of renders to prevent an infinite loop - React hooks

user_5229553 0
Viewed 403

I'm writing a block of code to sort some data using React hooks. But I get the above mentions warning/error Below is my code.

const [sort, setSort] = useState(sortedInfo)

if (condition){
 // some logic
} else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
 const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
 setSort(data);
}

My else case gets called many times which is fine as per the condition. Anything that can be done, so that setSort calls are minimized?

react-hooks reactjs javascript
3 Answers

Calling setSort() in render triggers too many renders, use useEffect hook to trigger changes when value changes.

useEffect(() => {
  if (condition){
    // some logic
  } else if (columns.find((col) => col.hasOwnProperty("actualSort"))){
    const {data, asc} = columns.find((col) => col.hasOwnProperty("actualSort").sorting)
    setSort(data);
  }
}, [condition]); // Only re-run the effect if condition changes
user_39358850

setState causes component re-render; and the re-render runs setState again - infinite loop; In Functional components, must use useEffect to fix this problem;

useEffect(() => {
   setSort(data)
}, [condition])

setSort() caused the re-render, and then (if the condition is not changed) useEffect() makes sure setSort(data) is not running again.

user_85036480

setSort will call re-render. So, it call If condition. You should use logic of if condition in function call or useEffect.

user_106614090
Related