Huku i Efektit useEffect në React

Për të punuar me efektet përdoret huku useEffect. Le të shohim se si funksionon.

Së pari le ta importojmë hukun tonë:

App.jsximport { useEffect } from 'react';

Le të krijojmë një komponent App që përmban një titull:

App.jsxfunction App() {
  return (
    <div>
      <h1>React App</h1>
    </div>
  );
}

export default App;

Supozojmë se duhet të bëjmë një veprim pas renderimit, për shembull, të vendosim ngjyrën e sfondit të gjithë faqes. Në këtë rast, sistemi i jashtëm do të jetë DOM i shfletuesit.

Le të aplikojmë hukun tonë:

App.jsxfunction App() {
  useEffect(() => {
    document.body.style.backgroundColor = 'green';
  }, []);
  
  ...
}

Në parametrin e dytë kalojmë një grup varësish. Ato përfshijnë vlerat e përdorura nga funksionet e komponentit. Tani për tani i kemi lënë bosh. Në këtë rast, ngjyra do të vendoset në të gjelbër vetëm një herë pas renderimit. Nuk mund ta heqim plotësisht parametrin e dytë, sepse komponenti juaj mund të hyrë në një ciklik të pafund.