Introducció

El hook useEffect és un dels hooks més utilitzats en React. Permet realitzar efectes secundaris en components funcionals, com ara la recuperació de dades, la subscripció a serveis, o la manipulació directa del DOM. És una alternativa als mètodes del cicle de vida dels components de classe, com componentDidMount, componentDidUpdate i componentWillUnmount.

Conceptes Clau

Efectes secundaris: Operacions que afecten fora del component, com ara crides a API, subscripcions, o actualitzacions del DOM.
Dependències: Variables que, quan canvien, provoquen que l'efecte es torni a executar.

Sintaxi Bàsica

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    // Codi de l'efecte
    console.log('Component muntat o actualitzat');

    // Opcional: neteja de l'efecte
    return () => {
      console.log('Component desmuntat o actualitzat');
    };
  }, []); // Array de dependències

  return <div>Hola, món!</div>;
}

Explicació del Codi

Importació: Importem useEffect des de React.
Declaració del component: Definim un component funcional ExampleComponent.
useEffect:
- El primer argument és una funció que conté el codi de l'efecte.
- El segon argument és un array de dependències. Si està buit ([]), l'efecte només s'executa una vegada després del muntatge del component.
- La funció retornada dins de useEffect és opcional i s'utilitza per netejar l'efecte quan el component es desmunta o abans de tornar a executar l'efecte.

Exemples Pràctics

Exemple 1: Recuperació de Dades

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error:', error));
  }, []); // L'efecte només s'executa una vegada

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Carregant...'}
    </div>
  );
}

Exemple 2: Subscripció a un Servei

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

function SubscriptionComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const subscription = someService.subscribe(newMessage => {
      setMessage(newMessage);
    });

    // Neteja de la subscripció
    return () => {
      subscription.unsubscribe();
    };
  }, []); // L'efecte només s'executa una vegada

  return <div>{message}</div>;
}

Exemple 3: Efecte amb Dependències

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

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

  useEffect(() => {
    document.title = `Has clicat ${count} vegades`;
  }, [count]); // L'efecte s'executa cada vegada que 'count' canvia

  return (
    <div>
      <p>Has clicat {count} vegades</p>
      <button onClick={() => setCount(count + 1)}>Clica'm</button>
    </div>
  );
}

Exercicis Pràctics

Exercici 1: Temporitzador

Crea un component que mostri un temporitzador que s'incrementa cada segon.

Solució

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

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // Neteja de l'interval
    return () => clearInterval(interval);
  }, []);

  return <div>Segons: {seconds}</div>;
}

Exercici 2: Finestra de Dimensions

Crea un component que mostri les dimensions de la finestra i actualitzi les dimensions quan la finestra es redimensiona.

Solució

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

function WindowDimensionsComponent() {
  const [dimensions, setDimensions] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);

    // Neteja de l'event listener
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div>
      Amplada: {dimensions.width}px, Alçada: {dimensions.height}px
    </div>
  );
}

Errors Comuns i Consells

Oblidar les dependències: Si oblides afegir dependències, l'efecte pot no comportar-se com esperes. Assegura't d'incloure totes les variables que utilitzes dins de l'efecte.
Neteja inadequada: Si el teu efecte necessita neteja (per exemple, desubscripcions o neteja de temporitzadors), assegura't de retornar una funció de neteja dins de useEffect.
Efectes infinits: Evita crear efectes que es repeteixin infinitament. Això pot passar si canvies l'estat dins de l'efecte sense tenir en compte les dependències correctes.

Conclusió

El hook useEffect és una eina poderosa per gestionar efectes secundaris en components funcionals de React. Comprendre com utilitzar-lo correctament és essencial per escriure components reactius i eficients. Amb la pràctica, podràs utilitzar useEffect per gestionar una àmplia varietat de casos d'ús en les teves aplicacions React.

Hook useEffect

Introducció

Conceptes Clau

Sintaxi Bàsica

Explicació del Codi

Exemples Pràctics

Exemple 1: Recuperació de Dades

Exemple 2: Subscripció a un Servei

Exemple 3: Efecte amb Dependències

Exercicis Pràctics

Exercici 1: Temporitzador

Solució

Exercici 2: Finestra de Dimensions

Solució

Errors Comuns i Consells

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa