🔥 Оптимизация 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://t.me/bash_srv Bash Советы
https://t.me/win_sysadmin Системный Администратор Windows
https://t.me/lifeproger Жизнь программиста. Авторский канал.
https://t.me/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://t.me/rabota1C_rus Вакансии для программистов 1С

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Excel лайфхак📌
https://t.me/Excel_lifehack

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

Вакансии 📌
https://t.me/sysadmin_rabota Системный Администратор
https://t.me/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(isLoading: boolean, delay = 300) {
  const [showLoader, setShowLoader] = useState(false);

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

    if (isLoading) {
      timeout = setTimeout(() => setShowLoader(true), delay);
    } else {
      setShowLoader(false);
    }

    return () => clearTimeout(timeout);
  }, [isLoading, delay]);

  return showLoader;
}

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

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

return (
  <>
    {showLoader && <Spinner />}
    {!isLoading && <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

🔍 Чекни скрытые баги в React: неправильное использование ключей в списках

Если ты рендеришь список компонентов и используешь index в качестве key, будь осторожен — это может привести к непредсказуемым багам UI.

📉 Что может пойти не так:
- Компоненты не будут корректно обновляться при изменении порядка;
- Сохранённое состояние внутри компонентов (например, в инпутах) будет сбиваться;
- Возрастает шанс багов при анимациях и переходах.

📌 Плохо:

{items.map((item, index) => (
  <Card key={index} data={item} />
))}

✅ Хорошо:

{items.map((item) => (
  <Card key={item.id} data={item} />
))}

🎯 Совет: используй id, UUID или стабильные ключи из данных. Если данных нет — скорее всего, нужно пересмотреть архитектуру.

Подробный разбор от React team:
https://react.dev/learn/rendering-lists#choosing-the-key

✍️ @React_lib

🔥 Оптимизируй React-компоненты с помощью useDeferredValue

Если у тебя есть input, фильтрация, поиск или ререндер списков — не спеши лепить useMemo и useCallback. Сначала попробуй useDeferredValue:

const deferredQuery = useDeferredValue(query);
const filtered = useMemo(() => filterData(data, deferredQuery), [deferredQuery]);

📌 Что делает?
useDeferredValue говорит React: "не срочно, можно чуть позже"
— идеально для плавности UI без блокировок при частых обновлениях.

🧠 Кейс:
Пользователь быстро вводит текст → React не тормозит от ререндеров больших списков → всё работает плавно и отзывчиво.

⚠️ Но не путай с debounce:
- debounce — задержка до начала работы
- useDeferredValue — отложенный рендер результата

📎 Официальная дока https://react.dev/reference/react/useDeferredValue

✍️ @React_lib

🔥 Как ускорить работу с формами в React

Я часто использую библиотеку react-hook-form, и одна из самых частых задач — это создание динамических списков полей (например, список контактов пользователя).
Раньше я писал кучу ручного кода для добавления/удаления элементов, пока не открыл для себя хук useFieldArray.

Пример использования:

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

function ContactForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: {
      contacts: [{ value: "" }]
    }
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "contacts"
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`contacts.${index}.value`)} />
          <button type="button" onClick={() => remove(index)}>Удалить</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ value: "" })}>Добавить контакт</button>
      <button type="submit">Отправить</button>
    </form>
  );
}

Этот код автоматически управляет всеми id полей и обновляет форму без лишней боли!
Если раньше вы управляли массивами вручную — попробуйте useFieldArray, вы удивитесь, насколько это проще.

❓ Пользуетесь ли вы react-hook-form или предпочитаете что-то другое для работы с формами?

✍️ @React_lib