Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?

Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет.

https://ui.dev/why-react-renders

✍️ @React_lib

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.

✅ Вместо этого используйте перечисления (enums).

✍️ @React_lib

🚀 Оптимизация React-приложения: 5 техник, которые работают

Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить.

1️⃣ Используйте React.memo
Если ваш компонент ререндерится без причины, оберните его в React.memo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.

const OptimizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback
Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.

const value = useMemo(() => ({ user, logout }), [user]);  

3️⃣ Разбейте состояние на атомарные части
Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.

const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting)
Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.

const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки
Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib

🔥 Оптимизация React-приложения: Код-сплиттинг с React.lazy

Сегодня расскажу о код-сплиттинге в React — мощном инструменте для ускорения загрузки приложения.

Когда наше приложение растёт, бандл становится тяжёлым, а время загрузки — длиннее. Решение? Код-сплиттинг. Он позволяет загружать только нужные компоненты, а не весь код сразу.

Как это работает?
Используем React.lazy() и Suspense, чтобы загружать компоненты только когда они реально нужны.

📌 Пример:

import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<p>Загрузка...</p>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Здесь HeavyComponent загружается только тогда, когда он нужен, а пока он загружается — показывается fallback.

📍 Где это использовать?
✔ Ленивые модули
✔ Большие страницы (Dashboard, Profile)
✔ Админ-панели
✔ Карты, графики, таблицы

Но помни: React.lazy работает только для компонентов. Для остального кода (например, утилит) лучше использовать динамический импорт (import()).

Попробуй внедрить код-сплиттинг в свой проект и скажи, насколько ускорилась загрузка! 🚀

✍️ @React_lib

Как я ускоряю работу с React-компонентами 🚀

Сегодня хочу поделиться трюком, который значительно ускорил мою разработку в React. Речь о создании базовых шаблонов компонентов.

В чем суть?
Каждый раз, когда начинаешь писать новый компонент, приходится проделывать одно и то же:
✅ Создавать файл,
✅ Импортировать React,
✅ Прописывать базовую структуру,
✅ Экспортировать компонент.

Решение: создать alias-команду или snippet в VS Code, который автоматически генерирует заготовку компонента!

Как это сделать?
🔹 Вариант 1. Используем VS Code Snippets
1. Открываем команду Preferences: Configure User Snippets
2. Выбираем javascript (или typescript),
3. Добавляем сниппет:

"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    <div>",
    "      ${2:Hello, world!}",
    "    </div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Создает базовый функциональный компонент"
}

Теперь, когда я пишу rfc и нажимаю Tab, код заполняется автоматически! 🔥

🔹 Вариант 2. Используем CLI-команду
Если вы используете bash или zsh, можно создать команду:

echo "import React from 'react';\n\nconst Component = () => {\n  return <div>Hello, world!</div>;\n};\n\nexport default Component;" > NewComponent.js

Теперь одним вызовом скрипта можно создать новый файл с базовой структурой!


Сниппеты и автоматизация таких рутинных задач позволяют не тратить время на однотипные действия. Используете что-то подобное в своей работе? Делитесь своими лайфхаками! 👇

✍️ @React_lib

Как писать чистый код в React? 🤔

Я знаю, что все хотят писать идеальный код, но реальность такова: зачастую приходится разбираться с грязными, запутанными компонентами. Сегодня покажу вам несколько принципов, которые помогут держать код в порядке.

1️⃣ Разбивайте компоненты 📌
Если ваш компонент растет и становится слишком сложным, разделите его на более мелкие части. Например, если у вас в компоненте 200 строк, скорее всего, это уже слишком.

❌ Плохо:

const Profile = ({ user }) => {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <button>Follow</button>
    </div>
  );
};

✅ Хорошо:

const Avatar = ({ src, alt }) => <img src={src} alt={alt} />;
const UserInfo = ({ name, bio }) => (
  <>
    <h2>{name}</h2>
    <p>{bio}</p>
  </>
);
const FollowButton = () => <button>Follow</button>;

const Profile = ({ user }) => (
  <div>
    <Avatar src={user.avatar} alt={user.name} />
    <UserInfo name={user.name} bio={user.bio} />
    <FollowButton />
  </div>
);

2️⃣ Используйте useMemo и useCallback ⚡
Если передаете функции в пропсы или у вас тяжелые вычисления, используйте мемоизацию.

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

3️⃣ Следите за зависимостями в useEffect 🔍
Ловушка многих новичков: забывают указывать зависимости или наоборот — указывают лишнее.

❌ Так делать нельзя:

useEffect(() => {
  fetchData();
}, []);

✅ Правильный вариант:

useEffect(() => {
  fetchData();
}, [fetchData]);

Чистый код — это не просто прихоть, а необходимость! Если писать код аккуратно, вам (и вашим коллегам) будет проще его поддерживать.

А какие принципы чистого кода используете вы? Делитесь в комментариях! 👇

✍️ @React_lib

📌 Оптимизация производительности React-приложения: useMemo и useCallback

Привет, друзья! Сегодня расскажу, как useMemo и useCallback помогают оптимизировать React-приложения.

🚀 Проблема
Когда компоненты ререндерятся слишком часто, производительность падает. Особенно если в них тяжелые вычисления или вложенные коллбэки, передающиеся в дочерние компоненты.

🛠 Решение: useMemo и useCallback

✅ useMemo – мемоизирует результат вычислений, чтобы не пересчитывать одно и то же на каждом ререндере.

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(data);
}, [data]); // Пересчитается только при изменении data

✅ useCallback – мемоизирует саму функцию, чтобы не создавать новую при каждом ререндере. Это полезно, если передаёте коллбэк в дочерний компонент.

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []); // Функция не будет пересоздаваться при каждом ререндере

⚠️ Важно:
Не стоит мемоизировать всё подряд! Это не панацея, а инструмент для конкретных случаев. Если лишняя мемоизация, то она только замедлит приложение.

Вы уже используете useMemo и useCallback в своих проектах? Пишите в комментариях!

✍️ @React_lib

⚛️ Знаешь ли ты все различия между useState и useRef в React?

✍️ @React_lib

❌ Избегайте использования useState() для сложного управления состоянием в React.

✅ Вместо этого используйте useReducer:

1. Предсказуемые переходы состояний
2. Легче тестировать
3. Лучше масштабируется

✍️ @React_lib

🛠️ Как ускорить работу с React? 5 мощных трюков!

Я часто вижу, как разработчики тратят лишнее время на рутинные задачи в React. Сегодня я покажу вам 5 мощных приемов, которые ускорят вашу работу и сделают код чище!



🔹 1. Используйте useMemo и useCallback правильно
Эти хуки не должны быть просто "по умолчанию" в каждом компоненте. Используйте их ТОЛЬКО там, где это реально снижает количество ненужных ререндеров. Если зависимость изменяется часто, мемоизация только замедлит работу.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(c), [c]);

🔹 2. Реэкспорт компонентов для удобного импорта
Когда в проекте много компонентов, постоянные импорты превращаются в хаос. Создайте index.ts и реэкспортируйте их:

// components/index.ts
export { default as Button } from './Button';
export { default as Input } from './Input';

Теперь можно писать:

import { Button, Input } from '@/components';

🔹 3. Минимизируйте пропсы в компонентах
Чем больше пропсов, тем сложнее поддерживать код. Используйте объекты и деструктуризацию, чтобы передавать только нужные данные.

❌ Так делать не надо:

<MyComponent name={name} age={age} isAdmin={isAdmin} />

✅ А так лучше:

<MyComponent user={{ name, age, isAdmin }} />

🔹 4. Оптимизируйте контекст (useContext)
Контекст удобен, но он перерисовывает весь потребляющий компонент при изменении данных. Разбейте контекст на более мелкие части или используйте селекторы.

const userName = useContext(UserContext).name; // Изменение других данных в контексте НЕ вызовет перерисовку

🔹 5. Динамические импорты для оптимизации загрузки
Разбейте код на чанки, загружая модули по требованию:

const LazyComponent = lazy(() => import('./HeavyComponent'));

Теперь React подгрузит компонент только тогда, когда он действительно нужен!


⚡ Попробуйте эти трюки в своих проектах и напишите, какие из них вы уже используете!

✍️ @React_lib

📌 5 крутых фич TypeScript, о которых ты мог не знать

TypeScript — это не просто строгая типизация, но и мощный инструмент, который может сделать твой код чище и безопаснее. Сегодня покажу 5 полезных возможностей, которые ты мог упустить!

1️⃣ satisfies — Гарантия соответствия
Часто бывает, что мы определяем объект с определёнными ключами, но хотим, чтобы TypeScript проверил, соответствуют ли они ожидаемой схеме. Вот где пригодится satisfies:

type Theme = "light" | "dark";

const config = {
  theme: "light",
  debug: true,
} satisfies { theme: Theme; debug: boolean };

// Теперь TypeScript гарантирует, что `theme` всегда будет соответствовать "light" | "dark"

2️⃣ keyof + typeof — Безопасные ключи
Если у тебя есть объект и ты хочешь работать с его ключами безопасно, эта комбинация спасает:

const user = {
  name: "Jhon",
  age: 30,
};

type UserKeys = keyof typeof user; // "name" | "age"

const key: UserKeys = "name"; // ✅ TypeScript гарантирует, что это корректный ключ

3️⃣ Extract<> и Exclude<> — Фильтрация типов
Эти утилиты позволяют выделять или исключать типы из union-типов:

type EventType = "click" | "hover" | "scroll";
type MouseEvents = Extract<EventType, "click" | "hover">; // "click" | "hover"
type NonMouseEvents = Exclude<EventType, "click" | "hover">; // "scroll"

4️⃣ as const — Заморозка значений
Если тебе нужно, чтобы объект или массив стали неизменяемыми (и сохранили точные значения), используй as const:

const roles = ["admin", "user", "guest"] as const;

type Role = (typeof roles)[number]; // "admin" | "user" | "guest"

5️⃣ ReturnType<> — Получение типа возвращаемого значения
Если у тебя есть функция, и тебе нужно определить её возвращаемый тип, ReturnType<> сделает это за тебя:

function getUser() {
  return { name: "Jhon", age: 30 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number }

✍️ @React_lib

Подборка Telegram каналов для программистов

https://www.tg-me.com/bash_srv Bash Советы
https://www.tg-me.com/win_sysadmin Системный Администратор Windows
https://www.tg-me.com/lifeproger Жизнь программиста. Авторский канал.
https://www.tg-me.com/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://www.tg-me.com/rabota1C_rus Вакансии для программистов 1С

Системное администрирование 📌
https://www.tg-me.com/sysadmin_girl Девочка Сисадмин
https://www.tg-me.com/srv_admin_linux Админские угодья
https://www.tg-me.com/linux_srv Типичный Сисадмин

https://www.tg-me.com/linux_odmin Linux: Системный администратор
https://www.tg-me.com/devops_star DevOps Star (Звезда Девопса)
https://www.tg-me.com/i_linux Системный администратор
https://www.tg-me.com/linuxchmod Linux
https://www.tg-me.com/sys_adminos Системный Администратор
https://www.tg-me.com/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://www.tg-me.com/sysadminof Книги для админов, полезные материалы
https://www.tg-me.com/i_odmin Все для системного администратора
https://www.tg-me.com/i_odmin_book Библиотека Системного Администратора
https://www.tg-me.com/i_odmin_chat Чат системных администраторов
https://www.tg-me.com/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://www.tg-me.com/sysadminoff Новости Линукс Linux

1C разработка 📌
https://www.tg-me.com/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://www.tg-me.com/DevLab1C 1С:Предприятие 8

Программирование C++📌
https://www.tg-me.com/cpp_lib Библиотека C/C++ разработчика
https://www.tg-me.com/cpp_knigi Книги для программистов C/C++
https://www.tg-me.com/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://www.tg-me.com/pythonofff Python академия. Учи Python быстро и легко🐍
https://www.tg-me.com/BookPython Библиотека Python разработчика
https://www.tg-me.com/python_real Python подборки на русском и английском
https://www.tg-me.com/python_360 Книги по Python Rus

Java разработка 📌
https://www.tg-me.com/BookJava Библиотека Java разработчика
https://www.tg-me.com/java_360 Книги по Java Rus
https://www.tg-me.com/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://www.tg-me.com/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://www.tg-me.com/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://www.tg-me.com/developer_mobila Мобильная разработка
https://www.tg-me.com/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://www.tg-me.com/frontend_1 Подборки для frontend разработчиков
https://www.tg-me.com/frontend_sovet Frontend советы, примеры и практика!
https://www.tg-me.com/telegram/com.React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://www.tg-me.com/game_devv Все о разработке игр

Библиотеки 📌
https://www.tg-me.com/book_for_dev Книги для программистов Rus
https://www.tg-me.com/programmist_of Книги по программированию
https://www.tg-me.com/proglb Библиотека программиста
https://www.tg-me.com/bfbook Книги для программистов
https://www.tg-me.com/books_reserv Книги для программистов

БигДата, машинное обучение 📌
https://www.tg-me.com/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://www.tg-me.com/bookflow Лекции, видеоуроки, доклады с IT конференций
https://www.tg-me.com/coddy_academy Полезные советы по программированию
https://www.tg-me.com/rust_lib Полезный контент по программированию на Rust
https://www.tg-me.com/golang_lib Библиотека Go (Golang) разработчика
https://www.tg-me.com/itmozg Программисты, дизайнеры, новости из мира IT
https://www.tg-me.com/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://www.tg-me.com/nodejs_lib Подборки по Node js и все что с ним связано
https://www.tg-me.com/ruby_lib Библиотека Ruby программиста

QA, тестирование 📌
https://www.tg-me.com/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://www.tg-me.com/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://www.tg-me.com/thehaking Канал о кибербезопасности
https://www.tg-me.com/xakep_2 Хакер Free

Книги, статьи для дизайнеров 📌
https://www.tg-me.com/ux_web Статьи, книги для дизайнеров

Математика 📌
https://www.tg-me.com/Pomatematike Канал по математике
https://www.tg-me.com/phis_mat Обучающие видео, книги по Физике и Математике

Excel лайфхак📌
https://www.tg-me.com/Excel_lifehack

https://www.tg-me.com/tikon_1 Новости высоких технологий, науки и техники💡
https://www.tg-me.com/mir_teh Мир технологий (Technology World)

Вакансии 📌
https://www.tg-me.com/sysadmin_rabota Системный Администратор
https://www.tg-me.com/progjob Вакансии в IT

🛠️ Оптимизация ререндеринга в React: 3 ключевых совета

Ререндеринг — один из главных "скрытых" врагов производительности в React. Если компонент ререндерится слишком часто, это может привести к лагам и снижению FPS в UI. Сегодня разберём три способа, как минимизировать ненужные ререндеры.

1️⃣ Используйте React.memo
Если ваш компонент получает одинаковые пропсы и не должен ререндериться без изменений, оберните его в React.memo.

🔹 Пример:

const MyComponent = React.memo(({ count }: { count: number }) => {
  console.log('Ререндер!');
  return <div>Count: {count}</div>;
});

👉 Теперь компонент будет ререндериться только если count изменился.

2️⃣ Используйте useCallback для функций
Передача новой функции в пропсы приводит к ререндерингу. useCallback предотвращает это:

🔹 Пример:

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

👉 Теперь handleClick не будет пересоздаваться при каждом ререндере.

3️⃣ Используйте useMemo для вычислений
Если у вас есть тяжёлые вычисления, мемоизируйте их с useMemo:

🔹 Пример:

const expensiveValue = useMemo(() => {
  return calculateHeavyStuff(data);
}, [data]);

👉 Теперь calculateHeavyStuff будет выполняться только при изменении data, а не при каждом ререндере.


✍️ @React_lib

🚨 Избегай монолитных компонентов, которые объединяют в себе отображение, управление состоянием и конфигурацию (например, ID, ref'ы) — такие компоненты сложнее сопровождать, тестировать и переиспользовать.

✅ Вместо этого разделяй функциональность на составные (composable) компоненты и используй context для передачи конфигурации и состояния.

✍️ @React_lib

Как сделать loader с задержкой, чтобы не мигал?

Иногда при загрузке данных хочется показать спиннер, но только если это занимает больше, скажем, 300мс. Это позволяет избежать "мигающего" лоадера при быстрой загрузке. Я часто использую этот приём, особенно при загрузке модалок или переключении вкладок.

Вот простая реализация на React:

import { useState, useEffect } from "react";

function useDelayedLoader(isClick Me Load More: boolean, delay = 300) {
  const [showLoader, setShowLoader] = useState(false);

  useEffect(() => {
    let timeout: ReturnType<typeof setTimeout>;

    if (isClick Me Load More) {
      timeout = setTimeout(() => setShowLoader(true), delay);
    } else {
      setShowLoader(false);
    }

    return () => clearTimeout(timeout);
  }, [isClick Me Load More, delay]);

  return showLoader;
}

Использование:

const isClick Me Load More = ...; // например, из useQuery или useState
const showLoader = useDelayedLoader(isClick Me Load More);

return (
  <>
    {showLoader && <Spinner />}
    {!isClick Me Load More && <Content />}
  </>
);

⚡️ Профит — спиннер появляется только если загрузка реально долгая. Пользователь не чувствует "дёргания" интерфейса. Маленький UX-трюк, но эффект — огромный.


✍️ @React_lib

Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это мой go-to инструмент для любых форм в проектах.

Почему именно react-hook-form?
- ⚡ Быстрее, чем Formik (нет лишних ререндеров)
- 🔍 Простая валидация через yup или zod
- 🔌 Легко интегрируется с UI-библиотеками (MUI, Ant Design, Tailwind)

Минималистичный пример:

import { useForm } from "react-hook-form";

export default function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      <input type="submit" />
    </form>
  );
}

Интеграция с Yup:

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object({
  email: yup.string().email().required(),
}).required();

export default function ValidatedForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input {...register("email")} />
      <p>{errors.email?.message}</p>
      <button type="submit">Отправить</button>
    </form>
  );
}

🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно.

✍️ @React_lib

Сегодня я покажу вам фичу React, которую многие недооценивают — useCallback. Часто его либо используют слишком много, либо вообще не используют. А ведь он может здорово помочь оптимизировать ререндеры, особенно когда дело касается передачи функций в дочерние компоненты.


Что делает useCallback?

Он кэширует функцию, возвращая ту же ссылку, пока зависимости не изменятся.

const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

Без него, при каждом ререндере компонента создаётся новая функция, и если вы передаёте её в props, это может триггерить лишние ререндеры у дочерних компонентов.



Где реально нужен useCallback?

- Когда функция передаётся в мемоизированный компонент (React.memo)
- Когда функция используется в useEffect, useMemo или других хук-эффектах
- Когда вы работаете с большими списками, и каждый элемент зависит от onClick или другого хендлера



Где не нужен?

- В простых компонентах без глубоких вложенностей
- Когда вы не передаёте функцию в другие компоненты
- Когда оптимизация важна меньше, чем читаемость



Мини-пример

const Parent = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={increment} />;
};

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>Click me</button>;
});

Если бы мы не использовали useCallback, Child бы перерендеривался каждый раз, даже если count не менялся внутри него.


Пишите в комментах, как часто вы используете useCallback — помогает или только мешает?


✍️ @React_lib

Сегодня я покажу вам одну фишку, которую часто недооценивают — как упростить управление глобальным состоянием с помощью Context + useReducer.

🧠 Многие сразу тянут в проект Redux или Zustand, но это не всегда нужно. Если у вас приложение небольшое или средней сложности — useReducer + Context может закрыть все ваши нужды.

Вот пример мини-хранилища:

// counterContext.tsx
import { createContext, useReducer, useContext, ReactNode } from 'react';

const CounterContext = createContext<any>(null);

const initialState = { count: 0 };

function reducer(state: typeof initialState, action: { type: string }) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export const CounterProvider = ({ children }: { children: ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

export const useCounter = () => useContext(CounterContext);

А вот как использовать:

// App.tsx
import { CounterProvider, useCounter } from './counterContext';

function Counter() {
  const { state, dispatch } = useCounter();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

🎯 Такой подход помогает:
- Локализовать логику
- Избежать лишних зависимостей
- Делать масштабирование более контролируемым

Если в будущем нужно будет вынести логику в отдельные модули или добавить middlewares — это тоже можно сделать!

А вы как решаете глобальное состояние в небольших проектах? Используете кастомные хуки, Zustand или всё же Redux?


✍️ @React_lib

🧩 Фишка: оптимизация ререндеров в React через Object.freeze

Если в стейте компонента хранятся вложенные объекты, React не сможет понять, что они не изменились, даже если вы не меняли их вручную. Это может привести к лишним ререндерам.

📌 Решение: используйте Object.freeze() для вложенных структур, чтобы избежать случайных мутаций и упростить сравнение.

const initialFilters = Object.freeze({
  category: 'all',
  priceRange: [0, 100],
});

const [filters, setFilters] = useState(initialFilters);

⚠️ Замороженный объект нельзя мутировать — это делает поведение более предсказуемым.

💡 Также freeze улучшает производительность при использовании React.memo или useMemo, так как ссылки на вложенные структуры остаются стабильными.

👀 Подходит для конфигов, словарей, фильтров и других редко изменяемых объектов.

✍️ @React_lib