Introducció

El hook useContext és una eina poderosa en React que permet accedir al context de l'aplicació de manera fàcil i eficient. El context és una manera de passar dades a través de l'arbre de components sense haver de passar explícitament props a cada nivell.

Objectius d'aquest tema:

Comprendre què és el context en React.
Aprendre a crear un context.
Utilitzar el hook useContext per accedir al context.
Veure exemples pràctics d'ús del context.

Què és el Context en React?

El context proporciona una manera de passar dades a través de l'arbre de components sense haver de passar explícitament props a cada nivell. És útil per a dades que han de ser accessibles per molts components a diferents nivells de l'arbre, com ara l'usuari autenticat, el tema de l'aplicació, etc.

Creació d'un Context

Per crear un context, utilitzem la funció createContext de React. Aquí teniu un exemple bàsic:

import React, { createContext } from 'react';

// Creem un context amb un valor per defecte
const MyContext = createContext('valor per defecte');

Proveïdor de Context

El proveïdor de context (Context.Provider) és el component que permet als components fills accedir al valor del context. Aquí teniu un exemple de com utilitzar el proveïdor de context:

import React, { createContext } from 'react';

// Creem un context
const MyContext = createContext('valor per defecte');

const MyProvider = ({ children }) => {
  const valor = 'Hola, món!';

  return (
    <MyContext.Provider value={valor}>
      {children}
    </MyContext.Provider>
  );
};

Utilitzar el Hook useContext

El hook useContext permet accedir al valor del context dins d'un component funcional. Aquí teniu un exemple de com utilitzar-lo:

import React, { useContext } from 'react';

// Creem un context
const MyContext = createContext('valor per defecte');

const MyComponent = () => {
  const valor = useContext(MyContext);

  return (
    <div>
      El valor del context és: {valor}
    </div>
  );
};

Exemple Complet

A continuació, es mostra un exemple complet que inclou la creació d'un context, un proveïdor de context i un component que utilitza el hook useContext per accedir al valor del context.

import React, { createContext, useContext } from 'react';

// Creem un context
const MyContext = createContext('valor per defecte');

const MyProvider = ({ children }) => {
  const valor = 'Hola, món!';

  return (
    <MyContext.Provider value={valor}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const valor = useContext(MyContext);

  return (
    <div>
      El valor del context és: {valor}
    </div>
  );
};

const App = () => {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
};

export default App;

Exercicis Pràctics

Exercici 1: Crear un Context de Tema

Crea un context per gestionar el tema de l'aplicació (clar o fosc).
Crea un proveïdor de context que permeti canviar el tema.
Utilitza el hook useContext en un component per mostrar el tema actual i un botó per canviar-lo.

Solució

import React, { createContext, useContext, useState } from 'react';

// Creem un context de tema
const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('clar');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'clar' ? 'fosc' : 'clar'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>El tema actual és: {theme}</p>
      <button onClick={toggleTheme}>Canvia el tema</button>
    </div>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <ThemeComponent />
    </ThemeProvider>
  );
};

export default App;

Exercici 2: Crear un Context d'Usuari

Crea un context per gestionar la informació de l'usuari (nom i estat d'autenticació).
Crea un proveïdor de context que permeti actualitzar la informació de l'usuari.
Utilitza el hook useContext en un component per mostrar la informació de l'usuari i un botó per autenticar/desautenticar l'usuari.

Solució

import React, { createContext, useContext, useState } from 'react';

// Creem un context d'usuari
const UserContext = createContext();

const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'Convidat', isAuthenticated: false });

  const toggleAuth = () => {
    setUser((prevUser) => ({
      ...prevUser,
      isAuthenticated: !prevUser.isAuthenticated,
    }));
  };

  return (
    <UserContext.Provider value={{ user, toggleAuth }}>
      {children}
    </UserContext.Provider>
  );
};

const UserComponent = () => {
  const { user, toggleAuth } = useContext(UserContext);

  return (
    <div>
      <p>Nom de l'usuari: {user.name}</p>
      <p>Estat d'autenticació: {user.isAuthenticated ? 'Autenticat' : 'No autenticat'}</p>
      <button onClick={toggleAuth}>
        {user.isAuthenticated ? 'Desautenticar' : 'Autenticar'}
      </button>
    </div>
  );
};

const App = () => {
  return (
    <UserProvider>
      <UserComponent />
    </UserProvider>
  );
};

export default App;

Conclusió

El hook useContext és una eina essencial per gestionar dades globals en una aplicació React. Permet accedir fàcilment al context i actualitzar-lo segons sigui necessari. Amb els exemples i exercicis proporcionats, hauríeu de tenir una comprensió sòlida de com utilitzar useContext en les vostres aplicacions React.

En el següent tema, explorarem com crear i utilitzar hooks personalitzats per encapsular la lògica reutilitzable en els vostres components React.

Hook useContext

Introducció

Objectius d'aquest tema:

Què és el Context en React?

Creació d'un Context

Proveïdor de Context

Utilitzar el Hook useContext

Exemple Complet

Exercicis Pràctics

Exercici 1: Crear un Context de Tema

Solució

Exercici 2: Crear un Context d'Usuari

Solució

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