Expliquez-moi réagir aux crochets

Les React Hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Introduits dans React 16.8, ils permettent aux composants fonctionnels de gérer la logique telle que la gestion des états, les événements du cycle de vie et les effets secondaires.

Quel est le besoin de crochets personnalisés ?

Les Hooks React personnalisés vous permettent d'extraire et de réutiliser la logique sur plusieurs composants. Ils aident à garder les composants propres et à réduire la duplication en encapsulant la logique avec état dans une fonction. Les Hooks personnalisés suivent les mêmes règles que les Hooks intégrés (par exemple, ils peuvent utiliser d'autres Hooks comme useState, useEffect, etc.).

Montre-moi le code :

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

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

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    

      
{count}
      Increment
      Decrement
      Reset
    
  );
};

Règles pour les hooks personnalisés

Appelez uniquement les hooks au niveau supérieur : N'appelez pas de hooks à l'intérieur de boucles, de conditions ou de fonctions imbriquées.

Appelez uniquement les hooks des fonctions React : Les hooks doivent être utilisés dans des composants fonctionnels ou d'autres hooks personnalisés.