Загрузка...
Загрузка...
Кастомные хуки (Custom Hooks) — это пользовательские функции, которые используют встроенные хуки React (useState, useEffect, useMemo и т.д.) для инкапсуляции и переиспользования логики в разных компонентах.
Главное правило: название кастомного хука должно начинаться с use, чтобы React понимал, что это хук и применял к нему соответствующие правила.
Вы можете вынести связанную бизнес-логику (например, работу с API, формы, таймеры) в отдельный хук и использовать его в нескольких местах.
Вместо того чтобы повторять один и тот же useEffect или useState в нескольких компонентах, вы пишете хук один раз и переиспользуете его.
Компоненты становятся меньше и чище, если основная логика вынесена в хуки.
function Component() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return <p>Ширина: {width}px</p>;
}
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return width;
}
// Использование
function Component() {
const width = useWindowWidth();
return <p>Ширина: {width}px</p>;
}
useFetch, useUserData)useForm, useInput)useModal)useLocalStorage)useInterval, useDebounce)useSocket, useMap)function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
// Использование
const [theme, setTheme] = useLocalStorage("theme", "light");
Вывод:
Кастомные хуки делают ваш код переиспользуемым, читаемым и чистым. Они помогают вынести повторяющуюся логику из компонентов и организовать архитектуру приложения.