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