Що таке React Hooks?

React Hooks – це функціональність в React, яка дозволяє використовувати стан та інші можливості React без написання класу компонента. React Hooks були введені в React 16.8 та надають спосіб керувати станом та логікою компонента у функціональних компонентах, а не в класах компонентів.

Деякі з найбільш вживаних хуків включають:

useState: дозволяє додати стан до ваших функціональних компонентів.
useEffect: дозволяє виконувати побічні ефекти у функціональних компонентах.
useContext: дозволяє доступ до контексту з функціональних компонентів.

Хуки дають розробникам можливість повторно використовувати статеву логіку та ділитися статевою логікою між компонентам без необхідності перенесення даних вверх віхом дерева компонентів за допомогою функціональності, такої як props або класові функції життєвого циклу.

Ось приклади коду:

import React, { useState } from 'react';

function Example() {
  // Declare a state variable called "count" and initialize it to 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Ось ще один приклад, цього разу з використанням хука useEffect:

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

function Example() {
  // Declare a state variable called "count" and initialize it to 0
  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>
  );
}

Зауважте, що хук useEffect викликається після кожного застосування, і це спосіб виконати деяку логіку після того, як застосування відбулося. У вищезгаданому прикладі він оновлює заголовок документу кожного разу, коли компонент перерендерюється та змінюється лічильник.

Це лише базові хуки. За більш детальною інформацією зверніться до https://reactjs.org/docs/hooks-intro.html