Объясните мне React Hooks

React Hooks — это функции, которые позволяют использовать состояние и другие функции React без написания класса. Представленные в React 16.8, они позволяют функциональным компонентам обрабатывать такую ​​логику, как управление состоянием, события жизненного цикла и побочные эффекты.

Для чего нужны специальные крючки?

Пользовательские хуки React позволяют извлекать и повторно использовать логику в нескольких компонентах. Они помогают поддерживать чистоту компонентов и сокращают дублирование за счет инкапсуляции логики с сохранением состояния в функцию. Пользовательские хуки подчиняются тем же правилам, что и встроенные хуки (например, они могут использовать другие хуки, такие как useState, useEffect и т. д.).

Покажите мне код:

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
    
  );
};

Правила для пользовательских хуков

Вызывайте хуки только на верхнем уровне: Не вызывайте хуки внутри циклов, условий или вложенных функций.

Вызывайте хуки только из функций React: Хуки следует использовать в функциональных компонентах или других пользовательских хуках.