Jak używać setTimeout w komponentach React?
W komponentach funkcyjnych React możemy użyć setTimeout, aby wykonać jakąś akcję po określonym czasie. Najczęściej robimy to wewnątrz hooka useEffect.
import React, { useEffect, useState } from 'react';
const TimeoutExample = () => {
const [message, setMessage] = useState('Czekam...');
useEffect(() => {
const timer = setTimeout(() => {
setMessage('Minęły 3 sekundy!');
}, 3000);
// Czyszczenie timera przy odmontowaniu komponentu
return () => clearTimeout(timer);
}, []);
return <p>{message}</p>;
};
export default TimeoutExample;
Co warto zapamiętać?
SetTimeout powinien być uruchamiany w useEffect, aby uniknąć wielokrotnego uruchamiania przy każdym renderze. Nie zapomnij o czyszczeniu timera (clearTimeout) w funkcji zwracanej z useEffect.
Inne z tej kategorii: Programowanie
Takie tam: www.marczuk.org