useCallback, closure

Stale Closure Problem
이유: 클로저안의 outdated variable 때문
해결:
- dependency추가
- setState(oldState => newState)

import { useCallback, useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(0);

  const onClick1 = () => {
    setCount(count + 1);
    console.log("1count:", count); // 1,2,3,...계속 증가함
  };

  const onClick2 = useCallback(() => {
    setCount(count + 1);
    console.log("2count:", count); // 0
  }, []);

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={onClick1}>1</button>
      <button onClick={onClick2}>2</button>
    </div>
  );
}

왜 두번째 온클릭을 실행하면 state가 다시 0으로 돌아갈까

useCallback안에 저장된 count는 처음에 온 나루토이고, 리렌더링이 될때 나루토가 업데이트가 안 되기 때문.

let, const, = () => 의 의미

매번 새로운版本의 함수를 생성하고, 새로운 클로저를 생성한다.

useCallback dependency가 없으면, 맨 처음에만 실행이되고 클로저 안에 있는 나루토는 옛날 맨 처음에 생성된 것이다.

rerender의 의미

그 전에 있던 数据， UI 全部删掉。重新画

그럼 다시 들어올때 어떻게 그전의 state를 기억하는거지?

Dom tree랑 같은 구조의 Data tree가 있는데, 리렌더링 할때 Dom트리는 싹다 밀고 다시 그리지만, Data 트리에 Hook을 걸어서 그전의 저장된 데이터를 알수 있다.

clearInterval해야하는 이유?

컴포넌트가 unmount 할때 그전의 것이 interval은 필요없기 때문

https://dmitripavlutin.com/react-hooks-stale-closures/