🔍 Чекни скрытые баги в 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

🚀 Как избавиться от "тряски" компонентов при переключении страниц в React?

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

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

Решение — layout routes

React Router предлагает отличный способ: использовать layout routes. Это позволяет сохранять общие компоненты между страницами без их размонтирования.

Вот пример:

// Layout.jsx
import { Outlet } from "react-router-dom";

export default function Layout() {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

// App.jsx
import { Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
}

Теперь Header и Footer не будут размонтироваться, и интерфейс останется стабильным при переходах.

👀 Плюс: можно добавить плавные анимации переходов с помощью framer-motion без артефактов.

Попробуйте — разница ощущается сразу.

✍️ @React_lib

🔥 React: избегай лишнего состояния с derived state!

В React часто встречается антипаттерн — derived state — когда ты дублируешь вычисляемое значение в useState.

👎 Пример плохого подхода:

const [items, setItems] = useState([]);
const [filtered, setFiltered] = useState([]);

useEffect(() => {
  setFiltered(items.filter(...));
}, [items]);

🔍 Проблема: ты сам обязан синхронизировать filtered с items. Это источник багов, особенно при сложных зависимостях.

✅ Лучше вычисляй на лету:

const filtered = useMemo(() => items.filter(...), [items]);

🔧 useMemo кэширует результат, и ты не хранишь дублирующее состояние.

🧠 Правило: если значение можно вычислить из другого — не пиши useState.

Подробнее: https://react.dev/learn/you-might-not-need-an-effect

✍️ @React_lib

Хотите собрать первое приложение на React за 60 минут?

Присоединяйтесь к открытому уроку от OTUS. Без скучных теорий и банальных todo-листов: только практика, код и живое общение. Вы узнаете, зачем нужны хуки и как компоненты делают интерфейс «живым», и самостоятельно создадите интерактивную игру.

Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.

Встречаемся 7 мая в 20:00 МСК, регистрируйтесь прямо сейчас, чтобы не пропустить: https://vk.cc/cLCpLs

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

🔥 Сегодня покажу, как настроить мгновенное обновление компонентов в React без полной перезагрузки страницы

Если ты пользуешься Vite, Parcel или Webpack с React — тебе точно стоит включить React Fast Refresh. Это технология, которая сохраняет состояние компонентов при обновлении кода. Раньше нужно было каждый раз обновлять страницу и терять всё введённое. Теперь — нет!

⚙️ Как это работает?

React Fast Refresh отслеживает изменения в компонентах и аккуратно обновляет только изменившиеся части DOM. Всё состояние (useState, useReducer, useRef) остаётся.

✅ Как включить в Vite:

Установи плагин:

npm install --save-dev @vitejs/plugin-react

И подключи в vite.config.ts:

import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

Этот плагин включает react-refresh автоматически под капотом.

🤯 Что получаешь:

* мгновенное обновление UI при изменении кода
* сохранение состояния формы, вкладок, фильтров и т.д.
* больше удовольствия от разработки 😎


🎯 Не забудь, это работает только в dev-режиме. В проде всё остаётся стабильным и оптимизированным.

✍️ @React_lib

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

Системное администрирование, DevOps 📌

https://www.tg-me.com/bash_srv Bash Советы
https://www.tg-me.com/win_sysadmin Системный Администратор Windows
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/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
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
https://www.tg-me.com/razrab_1C 1C Разработчик
https://www.tg-me.com/buh1C_prog 1C Программист | Бухгалтерия и Учёт
https://www.tg-me.com/rabota1C_rus Вакансии для программистов 1С

Программирование 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 академия.
https://www.tg-me.com/BookPython Библиотека Python разработчика
https://www.tg-me.com/python_real Python подборки на русском и английском
https://www.tg-me.com/python_360 Книги по Python

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/bigdata_1 Big Data, Machine Learning

Программирование 📌
https://www.tg-me.com/bookflow Лекции, видеоуроки, доклады с IT конференций
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 программиста
https://www.tg-me.com/lifeproger Жизнь программиста. Авторский канал.

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 Обучающие видео, книги по Физике и Математике
https://www.tg-me.com/matgeoru Математика | Геометрия | Логика

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

https://www.tg-me.com/mir_teh Мир технологий (Technology World)

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

🎯 Оптимизация ререндеров в React через мемоизацию функций

Многие знают про React.memo, но часто забывают про useCallback — и получают лишние ререндеры, особенно в списках и сложных компонентах.

📌 Проблема:

const handleClick = () => {
  console.log('Clicked');
};

<MyButton onClick={handleClick} />

Такой handleClick создаётся заново при каждом рендере. Если MyButton мемоизирован (React.memo), это сломает оптимизацию — пропсы-то изменились!

✅ Решение:

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

📈 Профит: Функция сохраняется между рендерами, MyButton не ререндерится без причины.

🧠 Особенно важно для:

* Компонентов в списках (map)
* Контейнеров с большим числом коллбеков
* Производительных UI (таблицы, дашборды, графики)

💡 Используйте eslint-плагин react-hooks/exhaustive-deps — он не даст забыть зависимости.

✍️ @React_lib

🔥 Антипаттерн в React: избыточные зависимости useEffect

Встречали такое?

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

❗️Проблема: fetchData — это функция, которая переопределяется при каждом рендере. В итоге эффект срабатывает чаще, чем должен, даже если id не менялся.

👎 Это вызывает лишние запросы, лаги и баги в логике.

💡 Решения:

1. Обёрнуть в useCallback:

const fetchData = useCallback((id: string) => {
  // ...
}, []);

2. Вынести вне компонента (если она не зависит от состояния):

const fetchData = (id: string) => {
  // ...
};

3. Игнорировать в зависимостях (как временный хак, но осторожно!):

// eslint-disable-next-line react-hooks/exhaustive-deps

✅ Правильное управление зависимостями в useEffect — ключ к стабильному и предсказуемому поведению компонентов.

✍️ @React_lib

Не просто кнопка "Загрузить": Секреты работы с файлами в React

🎓 19 мая в 20:00 — бесплатный вебинар для разработчиков, которые хотят делать удобную и безопасную загрузку файлов в React-приложениях.

Что покажем:
— Drag & Drop, предпросмотр, валидация — всё, что ждали от UX;
— Обработка PDF, Excel и изображений прямо в браузере;
— Как не «положить» интерфейс при загрузке тяжёлых файлов;
— Защита от XSS, проверка MIME-типов и другие нюансы безопасности.

📌 Для фронтендеров и fullstack-разработчиков, которым важна клиентская оптимизация.

В программе — реальные примеры кода, которые можно сразу использовать.
Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.

Регистрация: https://vk.cc/cLZMN5

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

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


🧵 Минимализм состояния с Zustand

Создание стора занимает меньше минуты:

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
}));

🎯 Как использовать в компоненте:

const Counter = () => {
  const { count, increase } = useStore();

  return (
    <button onClick={increase}>
      Count: {count}
    </button>
  );
};

🧠 Чем хорош Zustand:

* Нет провайдеров.
* Нет бойлерплейта.
* Поддержка middlewares, persist, subscriptions.
* Работает в Next.js, React Native, даже вне React.

Zustand идеально подходит для маленьких и средних приложений. Простой API — максимум гибкости.

✍️ @React_lib

🚧 TanStack DB — это TypeScript-first библиотека для управления данными и кэшированием, вдохновлённая такими инструментами, как tRPC, TanStack Query, Drizzle, Kysely, RxJS, MobX, Signal, SWR, Zustand и другими.


Что такое TanStack DB?

TanStack DB — это реактивная, абстрактная система управления данными с поддержкой провайдеров и кэшированием, ориентированная на работу с "запросами", "данными" и "реактивностью".

Ты описываешь структуру данных (схему), подключаешь источник данных (провайдер), и всё остальное — магия ✨:

* TanStack DB умеет работать с асинхронными источниками данных
* Обновления реактивны: изменения автоматически отражаются во всех связанных компонентах
* Поддерживаются "live queries" — данные автоматически обновляются при изменении источника
* Под капотом используются сигналы и абстракции, напоминающие RxJS, но с более простым API

https://github.com/TanStack/db

✍️ @React_lib

Как создать свой кастомный хук usePrevious для хранения предыдущего значения пропсов или стейта в компонентах React.

В реальных приложениях иногда нужно сравнивать текущее и предыдущее состояние — например, чтобы анимировать изменения или вызывать сайд-эффекты только при росте/падении значения. Сегодня покажу, как легко вынести логику в переиспользуемый хук.

import { useRef, useEffect } from 'react';

/**
 * Хук usePrevious сохраняет предыдущее значение value.
 * @param {T} value — текущее значение (пропс или стейт)
 * @returns {T | undefined} — предыдущий value (или undefined при первом рендере)
 */
function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
}

// Пример использования:
import React, { useState } from 'react';

export default function PriceTracker() {
  const [price, setPrice] = useState(100);
  const prevPrice = usePrevious(price);

  const getTrend = () => {
    if (prevPrice === undefined) return '—';
    return price > prevPrice ? '📈' : price < prevPrice ? '📉' : '➖';
  };

  return (
    <div>
      <h2>Цена: {price} {getTrend()}</h2>
      <button onClick={() => setPrice(p => p + 5)}>↑ Увеличить</button>
      <button onClick={() => setPrice(p => p - 5)}>↓ Уменьшить</button>
    </div>
  );
}

Почему это круто:

* ✅ Логика хранения предыдущих значений вынесена в один хук — нет дублирования кода.
* ✅ usePrevious работает и для пропсов, и для стейта.
* ✅ Помогает сравнивать и реагировать на изменения (анимации, уведомления, условные запросы).

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

✍️ @React_lib

🔥 Сегодня расскажу о том, как грамотно управлять состоянием форм в React

Наверняка каждый из нас сталкивался с мучительными попытками организовать удобный менеджмент форм. Хочется, чтобы всё было понятно, компактно и легко поддерживаемо. Вот пара рекомендаций:

1️⃣ React Hook Form — сейчас это самый популярный способ работы с формами. Отличная производительность, минимальное количество ререндеров и простая интеграция с валидацией.

2️⃣ Formik — проверенная годами библиотека, немного проигрывает в скорости, но выигрывает по удобству работы с комплексными формами и кастомными решениями.

Мой личный совет: используйте React Hook Form для небольших и средних проектов. Если же требуется высокая кастомизация и много логики, Formik остаётся отличным вариантом.

А вы какой способ используете чаще всего? Пишите в комментарии 👇

✍️ @React_lib

Сегодня хочу поделиться с вами простым, но часто необходимым при работе приёмом: созданием и использованием кастомного хука useFetch для загрузки данных. Часто в React-компонентах мы дублируем один и тот же код: ставим загрузку, устанавливаем состояние для data, error и loading, пишем useEffect, чтобы делать вызов API, очищаем эффекты… Всё это можно обобщить в одном месте и переиспользовать во множестве компонент.

Вот базовая реализация хука useFetch:

import { useState, useEffect, useRef } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setClick Me Load More] = useState(true);
  const [error, setError] = useState(null);

  // Чтобы избежать обновления стейта после размонтирования компонента
  const isMounted = useRef(true);

  useEffect(() => {
    // При монтировании флага меняются
    isMounted.current = true;

    // Начинаем загрузку
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Ошибка ${response.status}`);
        }
        return response.json();
      })
      .then(json => {
        if (isMounted.current) {
          setData(json);
          setClick Me Load More(false);
        }
      })
      .catch(err => {
        if (isMounted.current) {
          setError(err.message);
          setClick Me Load More(false);
        }
      });

    // Очистка: помечаем, что компонент размонтирован
    return () => {
      isMounted.current = false;
    };
  }, [url]);

  return { data, loading, error };
}

Разбор ключевых моментов:
1️⃣ useRef для флага isMounted
Если компонент размонтируется до того, как придёт ответ от сервера, вызов setState внутри промиса может вызвать утечку памяти и предупреждение React. Флаг isMounted.current помогает проверить, что компонент ещё жив.

2️⃣ Состояния data, loading, error
Вынесли все три состояния в хук — теперь в компоненте не нужно повторять одно и то же. Достаточно будет написать:

const { data, loading, error } = useFetch('https://api.example.com/posts');

3️⃣ Параметр url в массиве зависимостей
Если url меняется, хук автоматически запустит новую загрузку.

4️⃣ Обработка ошибок
Мы сразу проверяем response.ok, иначе бросаем исключение, и в .catch устанавливаем error.

Теперь пример использования хука в компоненте:

import React from 'react';
import useFetch from './hooks/useFetch';

function PostsList() {
  const { data: posts, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) {
    return <div>Загрузка...</div>;
  }

  if (error) {
    return <div>Ошибка: {error}</div>;
  }

  return (
    <div>
      <h2>Список постов</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostsList;

Плюсы такого подхода:

* Меньше дублирования кода. Вместо того чтобы копипастить один и тот же useEffect в десятке компонентов, просто импортируем useFetch.
* Централизованная логика. Если понадобится добавить, скажем, кеширование или отмену запроса через AbortController, меняем только внутри useFetch.
* Чистый код в компонентах. Компонент сосредоточен на отображении, а все детали работы с сетью спрятаны в хук.

Советы по улучшению:

* Можно расширить хук, чтобы принимать не только url, но и опции fetch (метод, заголовки и т.п.).
* Добавить параметр deps (зависимости), чтобы перезапускать запрос не только при изменении URL, а при любой другой переменной.
* Использовать AbortController, чтобы отменять запросы при новых вызовах или при размонтировании:

useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal })
      .then(/* ... */)
      .catch(err => {
        if (err.name === 'AbortError') return;
        // обработка других ошибок
      });
    return () => controller.abort();
  }, [url]);
  

* Можно внедрить кеширование: сохранять результаты предыдущих запросов в объекте и отдавать сразу, если URL повторяется.

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

✍️ @React_lib

💻 Хотите освоить основы веб-разработки с нуля? Откройте для себя важнейшие инструменты HTML

На открытом вебинаре вы подробно разберетесь:
▸ С основными HTML-тегами.
▸ Научитесь применять их атрибуты для стилизации и функциональности.
▸ Мы покажем, как правильно структурировать контент с использованием семантической разметки.
▸ Что поможет вам улучшить SEO и доступность веб-страниц.

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

📅 Урок 17 июня в 19:00 МСК проходит в преддверие старта курса «Fullstack Developer», все участники получат скидку 5% на обучение по промокоду FULLSTACK_6

🔴 Регистрация открыта: https://vk.cc/cMKubO

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru