El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els hooks personalitzats són una manera poderosa de reutilitzar la lògica d'estat entre components en React. Permeten encapsular la lògica que es pot compartir en una funció reutilitzable, la qual es pot utilitzar en múltiples components.

Què són els hooks personalitzats?

Un hook personalitzat és una funció de JavaScript que pot utilitzar altres hooks de React (com useState, useEffect, etc.) i encapsular la lògica que es pot reutilitzar en diversos components.

Avantatges dels hooks personalitzats:

Reutilització de codi: Permeten reutilitzar la lògica d'estat en diferents components.
Organització: Ajuda a mantenir el codi net i organitzat.
Testabilitat: Faciliten la prova de la lògica encapsulada.

Crear un hook personalitzat

Exemple: Hook per gestionar un comptador

A continuació, crearem un hook personalitzat per gestionar un comptador.

import { useState } from 'react';

// Definició del hook personalitzat
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

export default useCounter;

Utilitzar el hook personalitzat en un component

Ara que hem creat el nostre hook personalitzat useCounter, podem utilitzar-lo en un component.

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Comptador: {count}</p>
      <button onClick={increment}>Incrementar</button>
      <button onClick={decrement}>Decrementar</button>
      <button onClick={reset}>Reiniciar</button>
    </div>
  );
}

export default CounterComponent;

Exercicis pràctics

Exercici 1: Hook personalitzat per gestionar formularis

Crea un hook personalitzat anomenat useForm que gestioni l'estat d'un formulari. El hook ha de proporcionar funcions per actualitzar els camps del formulari i restablir el formulari.

Solució:

import { useState } from 'react';

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => {
    setValues(initialValues);
  };

  return { values, handleChange, resetForm };
}

export default useForm;

Utilitzar el hook `useForm` en un component

import React from 'react';
import useForm from './useForm';

function FormComponent() {
  const { values, handleChange, resetForm } = useForm({ name: '', email: '' });

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(values);
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Nom:</label>
        <input
          type="text"
          name="name"
          value={values.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default FormComponent;

Errors comuns i consells

Errors comuns:

No seguir les regles dels hooks: Assegura't de seguir les regles dels hooks, com ara només cridar-los a nivell superior i no dins de bucles, condicions o funcions embegudes.
No retornar valors correctament: Assegura't que el hook personalitzat retorni els valors i funcions necessàries per al component que l'utilitza.

Consells:

Nom de funció que comenci amb "use": Segueix la convenció de nomenclatura de React per als hooks personalitzats, començant el nom de la funció amb "use".
Documentació: Documenta els teus hooks personalitzats per facilitar la seva comprensió i ús per altres desenvolupadors.

Conclusió

Els hooks personalitzats són una eina poderosa per reutilitzar la lògica d'estat en React. Permeten encapsular la lògica en funcions reutilitzables, mantenint el codi net i organitzat. Practica creant i utilitzant hooks personalitzats per millorar la teva eficiència en el desenvolupament amb React.

Hooks personalitzats

Què són els hooks personalitzats?

Avantatges dels hooks personalitzats:

Crear un hook personalitzat

Exemple: Hook per gestionar un comptador

Utilitzar el hook personalitzat en un component

Exercicis pràctics

Exercici 1: Hook personalitzat per gestionar formularis

Solució:

Utilitzar el hook `useForm` en un component

Errors comuns i consells

Errors comuns:

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

Hooks personalitzats

Què són els hooks personalitzats?

Avantatges dels hooks personalitzats:

Crear un hook personalitzat

Exemple: Hook per gestionar un comptador

Utilitzar el hook personalitzat en un component

Exercicis pràctics

Exercici 1: Hook personalitzat per gestionar formularis

Solució:

Utilitzar el hook useForm en un component

Errors comuns i consells

Errors comuns:

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

Utilitzar el hook `useForm` en un component