useEffectEvent

import { useState, useEffect } from 'react';
 
function Timer() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const interval = setInterval(() => {
      // ❌ stale closure 발생: count는 항상 0으로 고정되어 있음
      console.log('Current count:', count);
      setCount(count + 1);
    }, 1000);
 
    return () => clearInterval(interval);
  }, []); // 의존성 배열이 비어 있어 count는 갱신되지 않음
 
  return <h1>Count: {count}</h1>;
}

import { useEffect, useEffectEvent } from 'react';
 
function ChatRoom({ roomId, nickname }) {
  // 1. nickname의 변화에 반응하지 않는 함수를 만듭니다.
  // 이 함수는 항상 최신 nickname 값을 참조합니다.
  const sendWelcomeMessage = useEffectEvent(() => {
    sendMessage(`Welcome to the room, ${nickname}!`);
  });
 
  useEffect(() => {
    // 2. 이 Effect는 오직 `roomId`가 변경될 때만 재실행됩니다.
    const connection = createConnection(serverUrl, roomId);
    
    connection.on('connected', () => {
      // 3. 연결 성공 시, 최신 nickname으로 환영 메시지를 보냅니다.
      sendWelcomeMessage();
    });
 
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // `nickname`은 의존성 배열에 포함되지 않습니다.
 
  return <h1>Welcome to {roomId}</h1>;
}

import { useState, useEffect, useEffectEvent } from 'react';
 
function DocumentEditor() {
  const [content, setContent] = useState('');
 
  // 1. 저장 로직을 useEffectEvent로 분리합니다.
  // 이 onSave 함수는 항상 최신 `content` 상태를 알고 있습니다.
  const onSave = useEffectEvent(() => {
    // 실제 애플리케이션에서는 이 부분에 API 호출이 들어갑니다.
    console.log('Saving content:', content);
    alert(`Saved: ${content.substring(0, 20)}...`);
  });
 
  // 2. 키보드 이벤트 리스너를 등록하는 Effect입니다.
  useEffect(() => {
    const handleKeyDown = (e) => {
      // Ctrl+S 또는 Cmd+S를 감지합니다.
      if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
        e.preventDefault(); // 브라우저의 기본 저장 동작을 막습니다.
        onSave(); // 최신 내용을 저장하는 함수를 호출합니다.
      }
    };
 
    window.addEventListener('keydown', handleKeyDown);
 
    // 컴포넌트가 언마운트될 때 이벤트 리스너를 제거합니다.
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []); // 3. 의존성 배열이 비어있어, 이 Effect는 단 한 번만 실행됩니다.
 
  return (
    <div>
      <h2>Document Editor 📝</h2>
      <p>아래 칸에 내용을 입력하고 <b>Ctrl+S</b> (또는 Mac에서 <b>Cmd+S</b>)를 눌러 저장하세요.</p>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        rows={10}
        style={{ width: '100%', padding: '10px' }}
        placeholder="여기에 입력하세요..."
      />
    </div>
  );
}