useEffect

Hook useEffect przyjmuje dwa parametry:

Pierwszy parametr to funkcja efektu, która jest wywoływana po każdym renderowaniu komponentu. Ta funkcja może wykonywać operacje asynchroniczne, takie jak pobieranie danych z API lub modyfikowanie stanu aplikacji.
Drugi parametr to tablica zależności, która określa, kiedy efekt powinien być ponownie uruchomiony. Jeśli tablica jest pusta, efekt będzie uruchamiany tylko raz po pierwszym renderowaniu komponentu. Jeśli tablica zawiera wartości, efekt będzie uruchamiany za każdym razem, gdy te wartości ulegną zmianie.

Przykład:

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

W powyższym przykładzie useEffect jest używany do ustawiania tytułu strony na wartość Count: ${count} po każdym kliknięciu przycisku. Tablica zależności zawiera tylko count, co oznacza, że efekt będzie uruchamiany tylko wtedy, gdy count ulegnie zmianie.

useEffect

Kategorie