[React] useSelect와 filter를 사용할 때 useEffect 무한랜더링 되는 현상

useSelect에서 가져온 배열중 조건에 객체 하나를 가져온 후애 이를 화면에 뿌리는 작업을 하는 중에 발생현 현상이다.

무한 랜더링 발생

처음에는 원인을 도저히 알 수 없었으나 find를 사용할 경우 잘 동작하는 것을 확인한 후 힌트를 얻었다.

무한랜더링이 발생한다는 것은 filter로 반환받은 객체가 항상 다른 값을 반환하여 useEffect가 계속 불려진다는 것이었다.

그래서 find와 filter의 반환 값 형식의 차이에 대해 알아 보았다.

 

filter: 조건에 맞는 모든 객체의 리스트를 새로 만들어 반환한다.

find: 조건에 맞는 첫 객체를 반환한다.

 

find를 사용할 경우 store에서 항상 같은 객체가 반환 될 것이 때문에 한번 랜더링 된 후 값이 바뀌지 않게 된다.

초기 랜더링 -> useSelect -> useEffect -> 리랜더링 -> useSelect -> 동일한 값을 받으므로 useEffect는 불리지 않음

반면 filter를 사용할 경우 항상 새로운 배열을 만들어 반환하게 되니 무한랜더링이 발생하는 것이였다.

초기 랜더링 -> useSelect -> useEffect -> 리랜더링 -> useSelect -> 새로운 값을 받으므로 useEffect가 다시 불림 -> 리랜더링 반복