06.07.2026 05:35
Custom Hooks Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна,
Custom Hooks
Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают.
Например, простой хук для работы с localStorage 👇
import { useState } from "react";
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
const setStoredValue = (newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setStoredValue] as const;
}
export default useLocalStorage;
Теперь можно использовать так:
const [theme, setTheme] = useLocalStorage("theme", "light");
🔥 Плюсы:
- код становится чище и переиспользуемым;
- избавляемся от дублирования логики;
- легко тестировать и поддерживать.
Я заметил, что когда начинаешь собирать библиотеку своих хуков, разработка ускоряется в разы. Советую прямо сегодня завести папку hooks и складывать туда такие полезности.
✍️ @React_lib
Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают.
Например, простой хук для работы с localStorage 👇
import { useState } from "react";
function useLocalStorage<T>(key: string, initialValue: T) {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? JSON.parse(stored) : initialValue;
});
const setStoredValue = (newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setStoredValue] as const;
}
export default useLocalStorage;
Теперь можно использовать так:
const [theme, setTheme] = useLocalStorage("theme", "light");
🔥 Плюсы:
- код становится чище и переиспользуемым;
- избавляемся от дублирования логики;
- легко тестировать и поддерживать.
Я заметил, что когда начинаешь собирать библиотеку своих хуков, разработка ускоряется в разы. Советую прямо сегодня завести папку hooks и складывать туда такие полезности.
✍️ @React_lib