Кои са основните хукове на React, които знаете и…

useState: За управление на състоянието на компонента.
useEffect: За изпълнение на странични ефекти (заявки към API, абонаменти, манипулации с DOM) във функционални компоненти като реакция на промени.
useContext: За достъп до стойността на контекста от компонента, без да се предават пропсове през междинни нива.
useRef: За съхраняване на мутабилни стойности, които не предизвикват повторен рендер, или за получаване на препратка към DOM елемент.
useMemo: За мемоизация на изчисления и предотвратяване на тяхното повторно изпълнение при всеки рендер, ако зависимостите не са се променили.
useCallback: За мемоизация на функции, за да се предотврати тяхното създаване при всеки рендер и да се избегнат проблеми с производителността при предаване към компоненти, използващи React.memo.
useReducer: Алтернатива на useState за управление на по-сложно състояние, особено полезна при множество свързани актуализации или когато следващото състояние зависи от предишното.
useLayoutEffect: Изпълнява се синхронно след всички мутации на DOM и преди браузърът да "рисува" промените. Използва се в случаи, когато е необходимо да се прочете разположението на DOM елемент след неговото рендериране и потенциално да се направят промени в зависимост от това.

Активно използвам useState, useEffect, useContext и useRef в ежедневната си работа. useMemo и useCallback прилагам за оптимизация на производителността в по-сложни компоненти или при работа с големи списъци. useReducer предпочитам за управление на комплексно състояние. useLayoutEffect използвам рядко, главно за специфични задачи, свързани с измерване и позициониране на елементи.

Пример за използване на useState и useEffect:

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

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

  useEffect(() => {
    // Обновяване на заглавието на страницата при промяна на брояча
    document.title = `Вие натиснахте ${count} пъти`;
  }, [count]); // Зависимост: ефектът се изпълнява само при промяна на count

  return (
    <div>
      <p>Вие натиснахте {count} пъти</p>
      <button onClick={() => setCount(count + 1)}>
        Натисни
      </button>
    </div>
  );
}

Пример за използване на useContext:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light'); // Създаваме контекст

function ThemedButton() {
  const theme = useContext(ThemeContext); // Получаване на стойността на контекста
  return <button className={theme}>Бутон с тема</button>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// В родителския компонент обвиваме с провайдър
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Кои са основните хукове на React, които знаете и използвате?