React Hooks : guide des états et des effets

Les React Hooks ont été introduits dans la version 16.8 pour révolutionner la façon dont l’état et les autres fonctionnalités de React sont gérés dans les composants fonctionnels, éliminant ainsi le besoin de composants de classe. Ils offrent un moyen propre et intuitif de gérer l’état, les effets secondaires et d’accéder aux fonctionnalités clés de React. Cet article approfondira les points fondamentaux de React et leurs applications pratiques.

Crochets d’État

Le useState le crochet permet aux composants fonctionnels d’incorporer l’état. Il renvoie un tableau avec deux éléments : la valeur de l’état actuel et une fonction qui vous permet de la mettre à jour.

import React, { useState } from "react";


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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

useReducer est une alternative à useState, gérer une logique d’état complexe. Il faut une fonction réductrice et un état initial.

import React, { useReducer } from 'react';


const initialState = { count: 0 };


function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }; 
    case 'decrement':
      return { count: state.count - 1 }; 
    default:
      throw new Error('Unsupported action type'); 
  }
}


function Counter() {
  
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

Crochets à effet

useEffect combine les fonctionnalités de componentDidMount, componentDidUpdateet componentWillUnmount en un seul crochet. Il vous permet d’effectuer des effets secondaires dans les composants fonctionnels.

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


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

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

  
  return <p>{data ? data.message : 'Loading...'}</p>;
}

export default DataFetcher;

Tableau de dépendances

Le deuxième argument de useEffect est un tableau de dépendances. Il détermine quand l’effet sera réexécuté :

1. Le tableau vide signifie que la fonction fetchData ne sera appelée que lors du rendu initial, et non lors des rendus suivants lorsque l’état des données change.

2. S’il contient des dépendances, l’effet ne s’exécutera que si l’une des dépendances a changé depuis le dernier rendu.

useLayoutEffect est une version synchrone de useEffect spécialement conçu pour les mutations DOM.

import React, { useState, useLayoutEffect } from "react";

function ExampleComponent() {
  const [width, setWidth] = useState(0);

  
  useLayoutEffect(() => {
    
    const newWidth = document.getElementById("myElement").offsetWidth;
    setWidth(newWidth);
  }, []); 

  return (
    <div>
      <div id="myElement">Resizable Element</div>
      <p>Width: {width}px</p>
    </div>
  );
}

export default ExampleComponent;

Crochets supplémentaires

Le useContext hook permet d’accéder à la valeur qu’un contexte React fournit dans un composant fonctionnel, éliminant ainsi le besoin de forage d’accessoires.

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


const MyContext = createContext();


function MyProvider({ children }) {
  const sharedValue = "Hello from Context!";

  
  return <MyContext.Provider value={sharedValue}>{children}</MyContext.Provider>;
}


function ChildComponent() {
  
  const contextValue = useContext(MyContext);

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


function App() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

export default App;

• De plus, vous pouvez explorer cet article détaillé sur la simplification de la consommation de contexte avec useContext. Cliquez ici

Crochets supplémentaires

useRef renvoie un objet ref mutable qui persiste entre les rendus.

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

function TextInput() {
  
  const inputRef = useRef(null);

  
  useEffect(() => {
    
    inputRef.current.focus();
  }, []);

  
  return <input ref={inputRef} type="text" />;
}

export default TextInput;

useMemo mémorise les résultats de la fonction en fonction des dépendances.

import React, { useMemo } from 'react';

function ExpensiveCalculation({ data }) {
  
  const result = useMemo(() => {
    
    
    
  }, [data]); 

  return <p>{result}</p>;
}

useCallback mémorise une fonction de rappel. La principale différence entre useCallback et useMemo réside dans le type de valeur qu’ils renvoient. useCallback renvoie une fonction de rappel mémorisée, tandis que useMemo renvoie une valeur mémorisée.

import React, { useCallback } from 'react';

function ParentComponent() {
  
  const handleClick = useCallback(() => {
    
    
  }, []); 

  
  return <ChildComponent onClick={handleClick} />;
}

export default ParentComponent;

En utilisant ces hooks, vous pouvez améliorer considérablement la fonctionnalité et la lisibilité de vos composants fonctionnels React, les rendant plus efficaces et plus faciles à gérer. L’intégration de hooks dans vos applications React vous permet de créer des interfaces utilisateur robustes et dynamiques avec moins de code passe-partout.