클로저와 React State

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      alert(count); // 항상 클릭 시점의 count를 보여준다
    }, 3000);
  };

  return <button onClick={handleClick}>{count}</button>;
}

function outer() {
  let value = 10;
  
  function inner() {
    console.log(value); // outer의 value를 기억한다
  }
  
  return inner;
}

const fn = outer();
fn(); // 10

function Counter() {
  const [count, setCount] = useState(0);
  // 이 count는 이번 렌더의 count다. 다음 렌더에서는 새 count가 생긴다.
  
  const handleClick = () => {
    console.log(count); // 이 클로저는 "이번 렌더의 count"를 캡처한다
  };

  return <button onClick={handleClick}>{count}</button>;
}

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(seconds); // 항상 0이 찍힌다!
      setSeconds(seconds + 1); // 항상 0 + 1 = 1로 설정된다!
    }, 1000);

    return () => clearInterval(id);
  }, []); // 의존성 배열이 비어있음

  return <div>{seconds}</div>;
}

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
  const [message, setMessage] = useState("");

  useEffect(() => {
    const handleScroll = () => {
      // message는 이벤트 리스너 등록 시점의 값
      console.log(message); // 항상 ""
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []); // message가 의존성에 없다

  return <div>{scrollY}</div>;
}

function SearchComponent() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const data = await fetchResults(query);
    // 이 시점의 query는 fetchResults 호출 시점의 query다
    // 사용자가 그 사이에 query를 변경했을 수 있다
    console.log(`"${query}"에 대한 검색 결과:`, data);
    setResults(data);
  };

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button onClick={handleSearch}>검색</button>
    </>
  );
}

// ❌ stale closure
setSeconds(seconds + 1); // seconds는 클로저가 캡처한 옛날 값

// ✅ 함수형 업데이트
setSeconds(prev => prev + 1); // prev는 항상 최신 값

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setSeconds(prev => prev + 1); // 항상 최신 값 기준으로 +1
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <div>{seconds}</div>;
}

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const secondsRef = useRef(seconds);

  // 매 렌더마다 ref를 최신 state로 동기화
  useEffect(() => {
    secondsRef.current = seconds;
  });

  useEffect(() => {
    const id = setInterval(() => {
      // ref는 항상 최신 값
      console.log("현재:", secondsRef.current);
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <div>{seconds}</div>;
}

useEffect(() => {
  const id = setInterval(() => {
    if (secondsRef.current >= 60) {
      // 최신 값을 기반으로 조건 분기
      clearInterval(id);
      return;
    }
    setSeconds(prev => prev + 1);
  }, 1000);

  return () => clearInterval(id);
}, []);

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const id = setTimeout(() => {
      setSeconds(seconds + 1);
    }, 1000);

    return () => clearTimeout(id);
  }, [seconds]); // seconds가 바뀔 때마다 새로운 timeout

  return <div>{seconds}</div>;
}

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState("");

  const sendMessage = useCallback(() => {
    // message와 roomId 모두 최신 값
    api.send(roomId, message);
  }, [roomId, message]);

  return <SendButton onClick={sendMessage} />;
}

// 제안된 API (아직 공식 출시 X)
function Chat({ roomId }) {
  const [text, setText] = useState("");

  const onSend = useEvent(() => {
    // 항상 최신 text와 roomId를 참조
    sendMessage(roomId, text);
  });

  // onSend의 참조는 절대 변하지 않음
  // useEffect의 의존성에 넣어도 무한 루프 안 남
}

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  });

  return useCallback((...args) => {
    return handlerRef.current(...args);
  }, []);
}

setCount(prev => prev + 1);
setItems(prev => [...prev, newItem]);
setMap(prev => new Map(prev).set(key, value));

const stateRef = useRef(state);
useEffect(() => { stateRef.current = state; });

// 비동기 콜백에서
if (stateRef.current > threshold) { ... }

const onTick = useEvent(() => {
  if (isPaused) return;
  setSeconds(prev => prev + 1);
  if (seconds >= maxSeconds) stop();
});

useEffect(() => {
  const ws = new WebSocket(url);
  return () => ws.close();
}, [url]); // url이 바뀔 때만 재연결

useEffect(() => {
  fetchData(userId); // ESLint: userId를 의존성에 추가하세요
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps

function App() {
  const options = { page: 1, limit: 10 }; // 매 렌더마다 새 객체

  useEffect(() => {
    fetchData(options);
  }, [options]); // 매 렌더마다 실행됨! (참조가 다르니까)
}

// 방법 1: useMemo
const options = useMemo(() => ({ page, limit }), [page, limit]);

// 방법 2: 원시값으로 분해
useEffect(() => {
  fetchData({ page, limit });
}, [page, limit]);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // 여전히 이전 값!
};

const handleClick = () => {
  const nextCount = count + 1;
  setCount(nextCount);
  console.log(nextCount); // 새 값 사용
};