Natif – Nextra

Hooks Natifs

Voici des exemples fonctionnels pour chaque Hook natif de React :

useState

Le Hook useState permet d’ajouter un état local à un composant fonctionnel. Il retourne un tableau avec deux éléments : la valeur actuelle de l’état et une fonction pour la mettre à jour.

import React, { useState } from 'react';
 
function Counter() {
 const [count, setCount] = useState(0);
 
 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}

useEffect

Le Hook useEffect permet d’effectuer des effets secondaires dans les composants fonctionnels. Il peut être utilisé pour des opérations telles que les requêtes réseau, les abonnements, les manipulations du DOM, etc.

import React, { useState, useEffect } from 'react';
 
function Example() {
 const [count, setCount] = useState(0);
 
 // Similar to componentDidMount and componentDidUpdate:
 useEffect(() => {
   // Update the document title using the browser API
   document.title = `You clicked ${count} times`;
 });
 
 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}

useContext

Le Hook useContext permet d’accéder à la valeur actuelle d’un contexte. Il est souvent utilisé avec le Context API pour partager des données globales entre plusieurs composants.

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
 
function ThemedButton() {
 const theme = useContext(ThemeContext);
 return <button theme={theme}>I am styled by theme context!</button>;
}

useReducer

Le Hook useReducer est une alternative à useState qui est plus adaptée pour gérer des logiques d’état complexes. Il fonctionne de manière similaire à reduce dans JavaScript, en acceptant un réducteur 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();
 }
}
 
function Counter() {
 const [state, dispatch] = useReducer(reducer, initialState);
 return (
   <>
     Count: {state.count}
     <button onClick={() => dispatch({type: 'decrement'})}>-</button>
     <button onClick={() => dispatch({type: 'increment'})}>+</button>
   </>
 );
}

useRef

Le Hook useRef permet de créer une référence mutable qui persiste pendant toute la durée de vie du composant. Il est souvent utilisé pour accéder aux éléments du DOM ou pour garder une référence à une valeur qui peut changer au fil du temps.

import React, { useRef } from 'react';
 
function TextInputWithFocusButton() {
 const inputEl = useRef(null);
 const onButtonClick = () => {
   // `current` pointe vers le champ de saisie monté dans le DOM
   inputEl.current.focus();
 };
 return (
   <>
     <input ref={inputEl} type="text" />
     <button onClick={onButtonClick}>Focus the input</button>
   </>
 );
}

useMemo

Le Hook useMemo permet de mémoriser des calculs coûteux. Il retourne une valeur mémorisée qui ne change que si une de ses dépendances change.

import React, { useMemo } from 'react';
 
function computeExpensiveValue(a, b) {
 // Simule un calcul coûteux
 let result = 0;
 for (let i = 0; i < 1000000000; i++) {
   result += a * b;
 }
 return result;
}
 
function MyComponent({ a, b }) {
 const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
 // ...
}

useCallback

Le Hook useCallback permet de mémoriser une fonction. Il retourne une version mémorisée de la fonction qui ne change que si une de ses dépendances change.

import React, { useCallback } from 'react';
 
function MyComponent({ a, b }) {
 const memoizedCallback = useCallback(
   () => {
     doSomething(a, b);
   },
   [a, b],
 );
 // ...
}

Dans cet exemple, memoizedCallback est une version mémorisée de la fonction qui ne change que si a ou b change.

Hooks Hooks personnalisés