Огляд React Хуків: Глибоке занурення в useState, useEffect та useContext

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

Що таке Хуки?

Хуки — це функції, які "підключаються" до стану та можливостей життєвого циклу React. Вони дозволяють вам:

1. Керувати станом (useState).
2. Обробляти побічні ефекти (useEffect).
3. Ділитися логікою між компонентами без зміни їхньої структури (useContext і кастомні хуки).

Загальні Хуки React

1. useState: Керування станом компонента

Хук useState дозволяє функціональним компонентам мати локальний стан. Він повертає масив з двох елементів:

• Поточний стан.
• Функція для оновлення стану.

Синтаксис:

const [state, setState] = useState(initialValue);

Приклад: Лічильник

import React, { useState } from 'react';

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

Count: {count}
 setCount(count + 1)}>Інкремент    
    );   } ```  

### 2. useEffect: Обробка побічних ефектів

Хук `useEffect` використовується для виконання побічних ефектів у функціональному компоненті, таких як отримання даних, оновлення DOM або налаштування підписок.

**Синтаксис:**

useEffect(() => {
// Логіка побічних ефектів тут
return () => {
// Логіка очищення тут (необов'язково)
};
}, [dependencies]);
```

Основні моменти:

• Без залежностей ([]): Виконується тільки один раз після монтування компонента.
• Масив залежностей ([dep1, dep2]): Виконується щоразу, коли змінюються зазначені залежності.
• Функція очищення: Корисна для очищення ресурсів, таких як підписки чи таймери.

Приклад: Отримання даних

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

function DataFetcher() {    
  const [data, setData] = useState(null);    
  useEffect(() => {    
    fetch('https://api.example.com/data')    
      .then(response => response.json())    
      .then(data => setData(data));    
  }, []); // Виконується тільки один раз після монтування компонента    
  return 
Data: {data ? JSON.stringify(data) : 'Завантаження...'}
;   } ```  

### 3. useContext: Спрощення обміну станом

Хук `useContext` спрощує процес обміну станом між компонентами без необхідності вручну передавати пропси через кожен рівень дерева компонентів.

**Огляд Context API:**

- Створіть контекст за допомогою `React.createContext`.
- Надати значення контексту за допомогою `Context.Provider`.
- Споживати значення контексту за допомогою `useContext`.

**Приклад: Обмін даними користувача**

import React, { useContext, useState } from 'react';
```

const UserContext = React.createContext();  
function ParentComponent() {    
  const [user, setUser] = useState({ name: 'Alice', age: 25 });    
  return (                
  );   
}  
function ChildComponent() {    
  const user = useContext(UserContext);    
  return 
Вітаємо, {user.name}!
;   } ```  

## Хуки в дії: Комбінування useState, useEffect і useContext

**Приклад: Панель користувача**

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

// Контекст для користувача    
const UserContext = React.createContext();  
function App() {    
  const [user, setUser] = useState(null);    
  useEffect(() => {    
    fetch('https://api.example.com/user')    
      .then(response => response.json())    
      .then(data => setUser(data));    
  }, []);    
  return (                
  );   
}  
function Dashboard() {    
  const user = useContext(UserContext);    
  return 
{user ? `Вітаємо, ${user.name}` : 'Завантаження...'}
;   } ```  

## Основні переваги хуків

1. **Спрощують код**: Немає потреби в складних класових компонентах.
2. **Перевикористовувана логіка**: Можна витягнути логіку з локальним станом у кастомні хуки.
3. **Покращена читаність**: Функції значно компактніші, ніж класи.
4. **Зручність**: Легше писати та тестувати функціональні компоненти.
**Легше тестування**: Безстаневі функціональні компоненти простіші для тестування.

## Кращі практики використання Хуків

1. **Використовуйте хуки тільки в функціональних компонентах**.
2. **Уникайте умовних хуків**: Завжди викликайте хуки на верхньому рівні вашого компонента.
3. **Управління залежностями**: Правильно вказуйте залежності в `useEffect`, щоб уникнути зайвих перерендерів або нескінченних циклів.
4. **Кастомні хуки**: Використовуйте кастомні хуки для абстрагування та повторного використання складної логіки.

## Висновок

React Хуки революціонізували спосіб створення компонентів, роблячи функціональні компоненти стандартом для сучасної розробки на React. Оволодіння такими хуками, як `useState`, `useEffect` та `useContext`, є необхідним для створення масштабованих, підтримуваних та ефективних додатків.



Перекладено з: [React Hooks Overview: A Deep Dive into useState, useEffect, and useContext](https://ruchir-gupta.medium.com/react-hooks-overview-a-deep-dive-into-usestate-useeffect-and-usecontext-cc6605fa72e4)