15. Jak działa hook `useEffect` w React i kiedy należy go używać?

Hook useEffect w React umożliwia wykonywanie efektów ubocznych w komponentach funkcyjnych. Można go używać do wykonywania operacji takich jak pobieranie danych, bezpośrednie manipulowanie DOM, subskrypcje i inne działania, które nie dotyczą renderowania komponentu.

Podstawowe użycie useEffect:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Tylko ponownie wykonuje się, gdy count się zmienia

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Czyszczenie efektu: Efekty mogą zwracać funkcję czyszczącą, która jest wykonywana przy demontowaniu komponentu lub przed ponownym wykonaniem efektu.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);

  return () => clearInterval(timer); // Funkcja czyszcząca
}, []); // Pusta lista zależności, efekt wykonuje się raz

Hook useEffect powinien być używany, gdy trzeba wykonać operacje po renderowaniu komponentu lub gdy trzeba zsynchronizować komponent z zewnętrznymi systemami.