💳 Коллекция готовых React-хуков

В неё входят решения для работы с событиями браузера, состояниями, сетевыми запросами, таймерами и другими типовыми задачами. Всё реализовано аккуратно, понятно и готово к продакшну.

➕ Проект связан с React.gg — интерактивной платформой, где показывают, как эти хуки создаются и почему работают именно так.

📎 Ссылка на коллецекцию useHooks

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#stack #react

🔥 Deep Clone — глубокое копирование объектов

Когда копируете объект через {...obj}, вложенные структуры остаются по ссылке. Меняете копию → меняется оригинал.

🔤 Два способа глубокого копирования:

Ограниченный, но быстрый для простых структур

const clone = (obj) => JSON.parse(JSON.stringify(obj));

Современный универсальный API (Chrome 98+, Firefox 94+, Node 17+, Safari 15+)

const clone = (obj) => structuredClone(obj);

🔤 Пример в React:

const addItem = (newItem) => {
  const clonedState = structuredClone(state);
  clonedState.items.push(newItem);
  setState(clonedState);
};

⚠️ Глубокое копирование — дорогая операция. В React его используют точечно, а не для всего состояния. В крупных приложениях лучше использовать immer или нормализованные структуры данных.

🔤 Когда deep clone действительно нужен:

— Копирование вложенных объектов и графов
— Redux / Zustand, когда нельзя мутировать state
— Снимки данных перед трансформациями
— Копирование конфигураций, где нет функций и методов

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #js #react

📎 Шпаргалка для подготовки к React-собеседованию

🔵 30 самых популярных вопросов
🔵 Развёрнутые ответы с примерами кода
🔵 JavaScript, React, Redux, веб-технологии
🔵 Источники и ссылки на документацию

Скачай, изучи, получи оффер 👨‍💻

🔗 Источник

🐸 Библиотека фронтендера

#readme #react

🐧 Тёмная тема в React: простой хук или архитектура

Каждый проект проходит один и тот же путь. Сначала — кнопка переключения темы. Через месяц — система настроек.

Разница в том, что вы выбрали в первый день.

1️⃣ useLocalStorage

Состояние в браузере, API как у useState:

const [theme, setTheme] = useLocalStorage('theme', 'dark')

🔴 Когда подходит:
- Одна настройка
- Прототип или MVP
- Нет планов масштабирования

🔴 Что сломается позже:
- Ключи localStorage расползаются по компонентам
- Нет миграций при смене структуры
- Рассинхронизация состояния между вкладками

Это не баг. Это предел подхода.

2️⃣ zustand + persist

Когда добавляются язык, feature flags, пользовательские настройки — нужен единый стор:

const theme = useSettings(s => s.theme)
const setTheme = useSettings(s => s.setTheme)

🔴 Что получаете:
- Один источник правды
- Селекторы → меньше ререндеров
- Миграции версий состояния из коробки
- Синхронизация между вкладками

🔴 Цена входа:
- +1 зависимость
- 20-30 строк на стор вместо 3 на хук

🔴 Результат:
- Архитектура, которая не разваливается через полгода

❓ Как выбрать:

- 1 настройка →
useLocalStorage

- 2-3 настройки → можно ещё потерпеть

- Система настроек → zustand сразу

localStorage — это инструмент.

zustand — это способ не переписывать проект через полгода.

🐸 Библиотека фронтендера

#readme #react