переклад
Вступ
Уявіть таку ситуацію: ви тільки-но почали працювати над новим проектом на React, переповнені ентузіазмом. Команда дизайнерів передала вам чудовий інтерфейс, і ви починаєте писати код. Але ось уже незабаром з'являються старі знайомі проблеми: повторювана логіка, захаращені компоненти та розчаровуючі баги. І тут вам спадає на думку — а що, якби був спосіб спростити все це?
Тут на допомогу приходять кастомні React хуки. Хуки дозволяють інкапсулювати логіку, роблячи ваші компоненти чистішими, а життя — набагато простішим. У цьому блозі я поділюсь 7 кастомними React хуками, без яких не можу обійтись, і поясню, чому вони є справжніми "ігровими змінами" для будь-якого проекту на React. Якщо ви готуєтесь до співбесід або хочете вдосконалити свої навички, це для вас!
1. useDebounce
Що робить:
Чи траплялося вам шукати щось і бачити, як API викликається на кожен введений символ? Ось тут на допомогу приходить дебаунсинг. Цей хук затримує виконання функції до того часу, поки користувач не припинить вводити текст.
Приклад:
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
// Використання
const searchQuery = useDebounce(inputValue, 500);
Чому це корисно:
- Запобігає надмірним викликам API.
- Підтримує високу швидкість та відгук додатку.
Порада для співбесіди: Дебаунсинг — це поширена концепція, яку часто обговорюють на співбесідах при оптимізації обробки вводу або API запитів.
2. useLocalStorage
Що робить:
Зберігає та отримує дані з локального сховища браузера, але в зручному для React форматі.
Приклад:
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error(error);
return initialValue;
}
});
const setValue = (value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error(error);
}
};
return [storedValue, setValue];
}
// Використання
const [theme, setTheme] = useLocalStorage('theme', 'light');
Чому це корисно:
- Осуществляє збереження для тем, товарів у кошику та іншого.
- Спрощує управління станом для даних, які не повинні втрачатися при оновленні сторінки.
Залучення користувачів: Уявіть ситуацію, коли ви оновлюєте сайт електронної комерції, і кошик раптово скидається — цього бути не повинно! Цей хук дозволяє уникнути такої катастрофи.
3. useFetch
Що робить:
Спрощує API запити та отримання даних з вбудованим обробленням станів завантаження та помилок.
Приклад:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Network response was not ok');
const json = await response.json();
setData(json);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
// Використання
const { data, loading, error } = useFetch('https://api.example.com/data');
Чому це корисно:
- Централізує та спрощує логіку API.
- Тримайте компоненти чистими, абстрагуючи процес отримання даних.
Важлива концепція: Розділення логіки отримання даних підвищує підтримуваність і тестованість.
4.
переклад
usePrevious
Що робить:
Відслідковує попереднє значення стану або пропса.
Приклад:
import { useRef, useEffect } from 'react';
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
// Використання
const prevCount = usePrevious(count);
Чому це корисно:
- Допомагає порівнювати зміни стану.
- Корисно для відлагодження або створення анімацій.
Веселий контент: Коли ви мріяли про «машину часу», щоб побачити, яким було значення змінної раніше? Цей хук — як Док Браун з Назад у майбутнє для вашого коду.
5. useTimeout
Що робить:
Управляє тайм-аутами декларативно.
Приклад:
import { useEffect, useRef } from 'react';
function useTimeout(callback, delay) {
const savedCallback = useRef();
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
if (delay === null) return;
const id = setTimeout(() => savedCallback.current(), delay);
return () => clearTimeout(id);
}, [delay]);
}
// Використання
useTimeout(() => console.log('Timeout triggered!'), 3000);
Чому це корисно:
- Обробляє відкладені дії без захаращення компонентів.
- Чудово підходить для сповіщень або анімацій.
6. useEventListener
Що робить:
Легко додає і очищає прослуховувачі подій (Event Listeners).
Приклад:
import { useEffect } from 'react';
function useEventListener(eventName, handler, element = window) {
useEffect(() => {
element.addEventListener(eventName, handler);
return () => {
element.removeEventListener(eventName, handler);
};
}, [eventName, handler, element]);
}
// Використання
useEventListener('resize', () => console.log('Window resized!'));
Чому це корисно:
- Робить обробку подій (Event Handling) послідовною.
- Уникає витоків пам'яті, очищаючи прослуховувачів подій (Event Listeners).
7. useToggle
Що робить:
Спрощує перемикання між булевими значеннями.
Приклад:
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = () => setValue((prev) => !prev);
return [value, toggle];
}
// Використання
const [isModalOpen, toggleModal] = useToggle();
Чому це корисно:
- Ідеально підходить для модальних вікон, випадаючих списків та перемикачів.
- Уникає повторення коду для управління станом.
Залучення користувачів: Уявіть вимикач світла, який без зусиль включається і вимикається — саме так цей хук працює для вашого стану.
Висновок
Кастомні хуки — це невідомі герої проектів на React. Вони спрощують ваш код, покращують його читабельність і підвищують підтримуваність. Якщо ви готуєтесь до співбесід або будуєте наступний великий додаток, ці 7 хуків обов'язково мають бути у вашому інструментарії. Так чому б не почати використовувати ці хуки у своїх проектах і не зробити ваш React код неперевершеним?
Які ваші улюблені кастомні хуки? Поділіться в коментарях!
Перекладено з: 7 React Custom Hooks That Changed the Way I Code