React

useEffect cleanup - Memory leaks voorkomen

Return function van useEffect ruimt op.

Home/Categorieën/React/useEffect cleanup - Memory leaks voorkomen

Waarom cleanup nodig?

Subscriptions en timers voorkomen memory leaks Event listeners verwijderen Abort API requests Runnen voor component unmount

Cleanup execution

Cleanup draait voor VOLGENDE effect Cleanup draait voor unmount Making sure resource freed

Code Voorbeelden

JAVASCRIPTuseEffect cleanup
function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    
    // CLEANUP function
    return () => {
      connection.disconnect();
    };
  }, [roomId]);
  
  return <h1>Room {roomId}</h1>;
}

// Real-world example
function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('tick');
    }, 1000);
    
    return () => clearInterval(id); // Cleanup
  }, []);
}

Relevante trefwoorden

cleanupmemory leakuseEffect
← Terug naar ReactAlle categorieën →