El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Hooks: Introducció i ús bàsic

Següent ►
►

Els hooks són una característica introduïda en React 16.8 que permeten utilitzar l'estat i altres característiques de React sense escriure una classe. Els hooks faciliten la reutilització de la lògica d'estat entre components i fan que el codi sigui més net i fàcil de seguir.

Què són els hooks?

Els hooks són funcions que permeten "enganxar-se" a les característiques de React, com ara l'estat i el cicle de vida, des de components funcionals. Els dos hooks més utilitzats són useState i useEffect.

Per què utilitzar hooks?

  • Simplicitat: Els components funcionals són més fàcils de llegir i escriure que les classes.
  • Reutilització de la lògica: Els hooks permeten reutilitzar la lògica d'estat entre diferents components.
  • Millor separació de preocupacions: Els hooks permeten separar la lògica relacionada amb l'estat i els efectes secundaris del codi de renderització.

useState Hook

El hook useState permet afegir estat a un component funcional. Aquí teniu un exemple bàsic:

import React, { useState } from 'react';

function Counter() {
  // Declarem una variable d'estat anomenada "count" i una funció per actualitzar-la "setCount"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has fet clic {count} vegades</p>
      <button onClick={() => setCount(count + 1)}>
        Fes clic
      </button>
    </div>
  );
}

export default Counter;

Explicació del codi

  • useState(0): Inicialitza l'estat amb un valor de 0. Retorna una matriu amb dos elements: l'estat actual (count) i una funció per actualitzar-lo (setCount).
  • setCount(count + 1): Actualitza l'estat incrementant el valor de count en 1 cada vegada que es fa clic al botó.

useEffect Hook

El hook useEffect permet realitzar efectes secundaris en components funcionals, com ara obtenir dades, subscripcions o modificar el DOM. Aquí teniu un exemple bàsic:

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

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

  // Utilitzem useEffect per actualitzar el títol del document
  useEffect(() => {
    document.title = `Has fet clic ${count} vegades`;
  }, [count]); // Només tornar a executar l'efecte si count canvia

  return (
    <div>
      <p>Has fet clic {count} vegades</p>
      <button onClick={() => setCount(count + 1)}>
        Fes clic
      </button>
    </div>
  );
}

export default Example;

Explicació del codi

  • useEffect(() => { ... }, [count]): Executa la funció passada com a primer argument després de renderitzar el component. El segon argument és una matriu de dependències; l'efecte només es tornarà a executar si alguna de les dependències canvia.
  • document.title = Has fet clic ${count} vegades``: Actualitza el títol del document cada vegada que count canvia.

Exercicis pràctics

Exercici 1: Crear un component amb useState

Crea un component que permeti a l'usuari introduir text en un camp d'entrada i mostri el text a sota del camp d'entrada.

Solució

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>Has escrit: {text}</p>
    </div>
  );
}

export default TextInput;

Exercici 2: Utilitzar useEffect per obtenir dades

Crea un component que obtingui dades d'una API i les mostri en una llista. Utilitza useEffect per fer la crida a l'API quan el component es monta.

Solució

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

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      <h1>Dades obtingudes:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

Errors comuns i consells

  • No cridar hooks dins de bucles, condicions o funcions embegudes: Els hooks s'han de cridar al nivell superior del component per assegurar-se que es criden en el mateix ordre en cada renderització.
  • Proporcionar dependències correctes a useEffect: Assegura't de proporcionar totes les dependències necessàries a la matriu de dependències de useEffect per evitar comportaments inesperats.

Conclusió

Els hooks són una eina poderosa que permeten utilitzar l'estat i altres característiques de React en components funcionals. En aquest mòdul, hem après els conceptes bàsics dels hooks useState i useEffect, i hem vist com utilitzar-los amb exemples pràctics. En els següents mòduls, explorarem altres hooks i conceptes avançats per millorar les nostres aplicacions React.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats