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]);

  return <h3>Ласкаво просимо до кімнати: {roomId}</h3>;
}

function ChatRoom({ roomId, serverUrl }: { roomId: string; serverUrl: string }) {
  const [isConnected, setIsConnected] = useState(false);
  
  // roomId, serverUrl, isConnected — всі реактивні!
  const connectionStatus = isConnected ? "підключено" : "відключено";
  
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    setIsConnected(true);

    return () => {
      connection.disconnect();
      setIsConnected(false);
    };
  }, [roomId, serverUrl]); // Обидва пропси обов'язкові!

  return <p>Статус: {connectionStatus}</p>;
}

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      // ❌ БАГ: count завжди буде 0, оскільки замикання захопило початкове значення
      console.log(`Поточний лічильник: ${count}`);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Порожній масив — ефект виконується лише один раз

  return (
    <div>
      <p>Лічильник: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      // ✅ Тепер count завжди актуальне
      console.log(`Поточний лічильник: ${count}`);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [count]); // Додали count у залежності

  return (
    <div>
      <p>Лічильник: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      // ✅ Використовуємо функціональну форму для читання актуального значення
      setCount((currentCount) => {
        console.log(`Поточний лічильник: ${currentCount}`);
        return currentCount; // Не змінюємо значення, лише читаємо
      });
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Порожній масив — ефект виконується лише один раз

  return (
    <div>
      <p>Лічильник: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
}

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

  useEffect(() => {
    const connection = connectToChat(roomId);
    connection.send(message); // Читаємо message

    return () => connection.close();
  }, [roomId]); // ⚠️ React Hook useEffect has a missing dependency: 'message'

  return <input value={message} onChange={(e) => setMessage(e.target.value)} />;
}

React Hook useEffect has a missing dependency: 'message'.
Either include it or remove the dependency array.

Object.is(5, 5);           // true
Object.is("hello", "hello"); // true
Object.is(true, false);    // false
Object.is({}, {});         // false (різні об'єкти!)
Object.is([], []);         // false (різні масиви!)
Object.is(NaN, NaN);       // true (відмінність від ===)

function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    // ❌ БАГ: options — новий об'єкт при кожному рендері!
    const options = { category: "electronics", sort: "price" };
    
    fetchProducts(options).then(setProducts);
  }, [options]); // ⚠️ options — нестабільна залежність

  // ...
}

// ✅ Об'єкт створюється один раз, стабільне посилання
const OPTIONS = { category: "electronics", sort: "price" };

function ProductList() {
  const [products, setProducts] = useState<Product[]>([]);

  useEffect(() => {
    fetchProducts(OPTIONS).then(setProducts);
  }, []); // Порожній масив — ефект виконується один раз
}

function ProductList({ category }: { category: string }) {
  const [products, setProducts] = useState<Product[]>([]);

  // ✅ options перестворюється лише при зміні category
  const options = useMemo(() => ({
    category,
    sort: "price"
  }), [category]);

  useEffect(() => {
    fetchProducts(options).then(setProducts);
  }, [options]);
}

import { useState, useEffect } from "react";

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

function createConnection(serverUrl: string, roomId: string) {
  return {
    connect() {
      console.log(`✅ Підключення: ${serverUrl}/rooms/${roomId}`);
    },
    disconnect() {
      console.log(`❌ Відключення: ${serverUrl}/rooms/${roomId}`);
    },
    on(event: string, callback: () => void) {
      if (event === "message") {
        setTimeout(callback, 2000); // Симулюємо отримання повідомлення
      }
    },
  };
}

function showNotification(message: string, theme: "light" | "dark") {
  const bgColor = theme === "light" ? "#f0f0f0" : "#333";
  console.log(`🔔 [${theme} theme] ${message}`, `background: ${bgColor}`);
}

export function Chat({ roomId, serverUrl, theme }: ChatProps) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();

    connection.on("message", () => {
      showNotification(`Нове повідомлення у ${roomId}`, theme);
    });

    return () => {
      connection.disconnect();
    };
  }, [roomId, serverUrl, theme]); // Всі три значення реактивні!

  return (
    <div>
      <h3>Кімната: {roomId}</h3>
      <p>Сервер: {serverUrl}</p>
      <p>Тема: {theme}</p>
    </div>
  );
}