useState에 같은 값이 들어와도 리렌더링하기

오늘 차트를 작성하다가 데이터가 안들어올때, interval로 데이터를 찍어주고 싶었는데, 작동을 하지 않아서 서칭으로 해결했고, 기록을 남겨두려고 한다.

useState를 사용했을 때 참조값일 경우 같은 주소를 바라보면 값이 변했다는 인식을 못하고 리 렌더링을 하지 않는다는 것이다.

처음에는 아래와 같이 작성했다.

const [data, setData] = useState(initData);

const allTagZero = Object.values(data).every(el => el === 0);

useEffect(() => {
  
  // ...MyCode
  
  setData(data);
  if (allTagZero) {
    const timer = setInterval(() => {
      setData({ data });
    }, 1000);
    return () => clearInterval(timer);
  }
}, [categoryStatus]);

해결

해결 방법은 같은 다른 값이라는 것을 react에게 알려주기 위해 구조 분해를 사용했다.

const [data, setData] = useState(initData);

const allTagZero = Object.values(data).every(el => el === 0);

useEffect(() => {
  
  // ...MyCode
  
  setData(data);
  if (allTagZero) {
    const timer = setInterval(() => {
      // ! 바뀐부분
      setData({ ...data });
    }, 1000);
    return () => clearInterval(timer);
  }
}, [categoryStatus]);

이제 다른 값으로 제대로 인식한다.