interface ProductCardProps {
  productId: string;
  productName: string;
  theme: "light" | "dark";
}

function ProductCard({ productId, productName, theme }: ProductCardProps) {
  function handleAddToCart() {
    // Ця функція виконується ЛИШЕ при кліку на кнопку
    // Вона прочитає актуальні значення productId та theme
    console.log(`Додано товар ${productId} до кошика (тема: ${theme})`);
    
    // Відправка аналітичної події з поточною темою
    trackEvent("add_to_cart", {
      product_id: productId,
      theme: theme,
    });
  }

  return (
    <div className={`product-card ${theme}`}>
      <h3>{productName}</h3>
      <button onClick={handleAddToCart}>Додати до кошика</button>
    </div>
  );
}

import { useEffect } from "react";

interface ChatRoomProps {
  roomId: string;
}

function createConnection(roomId: string) {
  return {
    connect() {
      console.log(`✅ Підключення до кімнати "${roomId}"`);
    },
    disconnect() {
      console.log(`❌ Відключення від кімнати "${roomId}"`);
    },
  };
}

export function ChatRoom({ roomId }: ChatRoomProps) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();

    return () => {
      connection.disconnect();
    };
  }, [roomId]); // ← Ефект реагує на зміну roomId

  return <h3>Кімната: {roomId}</h3>;
}

interface ChatRoomProps {
  roomId: string;
  theme: "light" | "dark";
}

function showNotification(message: string, theme: "light" | "dark") {
  console.log(`[${theme}] ${message}`);
}

export function ChatRoom({ roomId, theme }: ChatRoomProps) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    
    // Показуємо сповіщення з урахуванням поточної теми
    showNotification(`Підключено до кімнати ${roomId}`, theme);

    return () => {
      connection.disconnect();
    };
  }, [roomId, theme]); // ❌ Додали theme до залежностей

  return <h3>Кімната: {roomId}</h3>;
}

import { useEffect, useRef } from "react";

export function ChatRoom({ roomId, theme }: ChatRoomProps) {
  // Створюємо рефу для зберігання актуальної теми
  const themeRef = useRef(theme);
  
  // Оновлюємо рефу при кожному рендері
  // Це синхронно, тому ref.current завжди містить найсвіжіше значення
  themeRef.current = theme;

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    
    // Читаємо theme із рефи, а не напряму із пропсів
    showNotification(`Підключено до кімнати ${roomId}`, themeRef.current);

    return () => {
      connection.disconnect();
    };
  }, [roomId]); // ✅ Тільки roomId у залежностях!

  return <h3>Кімната: {roomId}</h3>;
}

// ❌ ПОГАНО: theme викликає розрив сокета
useEffect(() => {
  const socket = connectToWebSocket(roomId);
  
  // Аналітика з урахуванням теми
  trackEvent("room_visited", { roomId, theme });
  
  return () => {
    socket.close();
  };
}, [roomId, theme]); // Зміна theme розриває сокет!

interface ChatAnalyticsProps {
  roomId: string;
  theme: "light" | "dark";
}

export function ChatWithAnalytics({ roomId, theme }: ChatAnalyticsProps) {
  const themeRef = useRef(theme);
  themeRef.current = theme;

  useEffect(() => {
    const socket = connectToWebSocket(roomId);
    
    // Читаємо свіжу тему з рефи, але вона не є залежністю
    trackEvent("room_visited", {
      roomId,
      theme: themeRef.current, // Завжди актуальна тема
    });
    
    socket.on("message", (msg: string) => {
      console.log(`[${themeRef.current}] ${msg}`);
    });
    
    return () => {
      socket.close();
    };
  }, [roomId]); // Тільки roomId перезапускає ефект

  return <div className={`chat-room ${theme}`}>...</div>;
}

import { useEffect, experimental_useEffectEvent as useEffectEvent } from "react";

export function ChatRoom({ roomId, theme }: ChatRoomProps) {
  // Оголошуємо "подію ефекту" — функцію, яка НЕ є реактивною
  const onConnected = useEffectEvent(() => {
    showNotification(`Підключено до ${roomId}`, theme);
  });

  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    
    // Викликаємо подію ефекту — вона завжди бачить свіжі значення
    onConnected();
    
    return () => {
      connection.disconnect();
    };
  }, [roomId]); // theme не потрібна у залежностях!

  return <h3>Кімната: {roomId}</h3>;
}

useEffect(() => {
  trackEvent("room_visited", { roomId, theme });
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [roomId]); // ❌ Лінтер скаже, що theme має бути у залежностях

useEffect(() => {
  const options = { roomId, theme }; // ❌ Новий об'єкт при кожному рендері
  trackEvent("room_visited", options);
}, [options]); // React бачить різні посилання на об'єкти

useEffect(() => {
  const options = { roomId, theme };
  trackEvent("room_visited", options);
}, [roomId, theme]); // Залежність від примітивів, а не від об'єкта

useEffect(() => {
  const socket = connectToRoom(roomId); // Реактивна частина (має перезапускатися)
  const userPreferences = fetchUserPrefs(userId); // Нереактивна частина (достатньо один раз)
  return () => socket.close();
}, [roomId, userId]); // userId викликає розрив сокета!

// Ефект 1: підключення до кімнати (реагує на roomId)
useEffect(() => {
  const socket = connectToRoom(roomId);
  return () => socket.close();
}, [roomId]);

// Ефект 2: завантаження налаштувань (реагує на userId)
useEffect(() => {
  fetchUserPrefs(userId);
}, [userId]);

interface ButtonWithLoggingProps {
  onClick: () => void;
  theme: "light" | "dark";
  children: React.ReactNode;
}

export function ButtonWithLogging({
  onClick,
  theme,
  children,
}: ButtonWithLoggingProps) {
  const themeRef = useRef(theme);
  themeRef.current = theme;

  function handleClick() {
    // Виконуємо оригінальний обробник
    onClick();
    
    // Логуємо подію з актуальною темою
    console.log(`[${themeRef.current}] Кнопка "${children}" натиснута`);
  }

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

import { useState, useEffect, useRef } from "react";

interface AutoCounterProps {
  intervalMs: number; // Інтервал оновлення в мілісекундах
}

export function AutoCounter({ intervalMs }: AutoCounterProps) {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(intervalMs);
  
  // Оновлюємо рефу при кожному рендері
  intervalRef.current = intervalMs;

  useEffect(() => {
    // Створюємо таймер один раз при монтуванні
    const id = setInterval(() => {
      setCount((prev) => prev + 1);
      
      // Можна використати intervalRef.current для логування
      console.log(`Оновлення через ${intervalRef.current}мс`);
    }, intervalRef.current);

    return () => {
      clearInterval(id);
    };
  }, []); // Порожній масив залежностей — таймер створюється один раз!

  return (
    <div>
      <p>Лічильник: {count}</p>
      <p>Інтервал: {intervalMs}мс</p>
    </div>
  );
}