🤩Хотите, чтобы ваши React-приложения не просто работали, а вызывали вау-эффект?

Присоединяйтесь к открытому уроку «Анимируем React: от нуля до вау-эффекта» 12 августа в 20:00 МСК. Мы покажем, как создать живые, отзывчивые интерфейсы с помощью библиотеки анимаций Framer Motion и API Intersection Observer. Разберём, как добавить современный UX без перегрузки сторонними библиотеками, чтобы каждый элемент интерфейса был динамичным и запоминающимся.

Освойте практические подходы и техники, которые используют профессионалы для создания визуально выразительных интерфейсов. Получите знания, которые значительно улучшат ваш опыт в React.

⚡️Присоединяйтесь к открытому вебинару и получите скидку на курс «React.js Developer»: https://vk.cc/cOkYCL

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

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

Допустим, у вас есть компонент, который отображает список данных после загрузки. Пока данные подгружаются, вы показываете спиннер, а потом - сам список. Всё вроде нормально… но при переключении состояния верстка “прыгает”, элементы смещаются, и пользователь видит неприятный скачок.

💡 Как решить?
Главная идея — зарезервировать место под контент заранее. Даже если мы показываем скелетон или спиннер, блок должен иметь такую же высоту, как и итоговый контент.
Например:

{isLoading ? (
  <div style={{ height: 300 }}>
    <Spinner />
  </div>
) : (
  <List items={data} />
)}

А ещё лучше — использовать скелетон-загрузчик (skeleton loader). Он повторяет форму будущего контента, и благодаря этому переключение происходит плавно и без сдвигов.

📌 Совет: в UI-библиотеках вроде Material UI или Ant Design уже есть готовые скелетоны - просто используйте их вместо "чистого" спиннера. Пользователь не заметит перехода, и приложение будет казаться быстрее.

А у вас бывает, что верстка дергается при смене состояния? Как вы это решаете?

✍️ @React_lib

Сегодня хочу показать вам один из практичных паттернов в React - Container & Presentational Components.

Очень часто мы мешаем бизнес-логику и UI в одном компоненте. Это делает код тяжелым для поддержки, особенно в больших проектах.

⚡️ Подход простой:

- Container-компоненты отвечают за работу с данными: запросы к API, обработку состояния, вызовы хендлеров.
- Presentational-компоненты - только за отображение. Они получают данные и колбэки через props и не думают о том, откуда эти данные пришли.

Пример 👇

// Container
function UserContainer() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

  return <UserProfile user={user} />;
}

// Presentational
function UserProfile({ user }) {
  if (!user) return <p>Загрузка...</p>;
  return <h2>{user.name}</h2>;
}

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

А как вы пишете? Делите логику и UI или чаще держите все в одном компоненте?

✍️ @React_lib

🚀 С 25 по 30 августа пройдёт Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда.

В программе:

💡 Паттерны и подводные камни View Transition API в React (Николай Шабалин, СберЗдоровье)

🧠 Глубокое погружение в архитектуру React Hooks (Максим Никитин, Rocket Science)

⚙️ Разбор FSD 2.1 на практике, без догм (Лев Челядинов, FSD Core team)

📚Подготовка к архитектурному интервью для фронтендеров (Игорь Антонов, Т-Банк)

📐Layout-паттерны за пределами Flexbox и CSS Grid (Саша Илатовский, Albato)

🎯 Все темы прикладные, с практикой и кейсами.

🔗 Подробности и билеты

P.S: Для подписчиков группы React скидка 500 р по промокоду react_crew_3_Osn1zQ

Динамический импорт компонентов в React.

Часто в приложении мы грузим сразу всё, даже то, что пользователю может и не понадобиться. Например, модальные окна, сложные графики, админские панели. Это увеличивает бандл и замедляет загрузку.

Решение простое - использовать React.lazy и Suspense:

import { Suspense, lazy } from "react";

const Chart = lazy(() => import("./Chart"));

function Dashboard() {
  return (
    <div>
      <h1>Статистика</h1>
      <Suspense fallback={<p>Загрузка графика...</p>}>
        <Chart />
      </Suspense>
    </div>
  );
}

Теперь график подгрузится только тогда, когда реально нужен.
⚡ Это экономит мегабайты и ускоряет first paint приложения.

👉 Но будь аккуратен: динамический импорт хорошо работает для редко используемых частей. А если компонент нужен почти всегда - выгоды не будет.

Я, например, почти всегда лениво загружаю модальные окна и тяжелые виджеты.
А ты используешь React.lazy у себя в проекте?

✍️ @React_lib

Почему ваш useEffect лишний (и что вместо него)

Сейчас покажу 6 типичных случаев, где useEffect не нужен и только плодит баги и лишние рендеры. Дам короткие «до/после».

1. Вычисляемое из пропсов/стейта
❌ Плохо

const [fullName, setFullName] = useState('');
useEffect(() => { setFullName(`${user.first} ${user.last}`); }, [user]);

✅ Хорошо

const fullName = `${user.first} ${user.last}`;

2. Фильтрация/сортировка списка
❌ Плохо

const [filtered, setFiltered] = useState<Item[]>([]);
useEffect(() => { setFiltered(items.filter(byQuery(query))); }, [items, query]);

✅ Хорошо

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

3. Счётчики/таймеры для UI
❌ Плохо — пишут в стейт каждую секунду, лишний рендер
✅ Лучше — храните в useRef, рендерите только когда нужно показать новое число:

const tickRef = useRef(0);
useEffect(() => {
  const id = setInterval(() => { tickRef.current++; }, 1000);
  return () => clearInterval(id);
}, []);
// Когда надо отрисовать — дерните setState из контролируемой точки.

4. Синхронизация формы с данными
❌ Плохо — «заливают» в стейт через эффект
✅ Лучше — передавайте значения как defaultValue/values в форму или используйте «ключ» для ремонта формы:

<form key={user.id}>...</form>

5. Запросы данных
❌ Плохо — «сами» тащим fetch в эффект, пишем кэш, статус, отмену
✅ Лучше — вынесите в data-layer (например, TanStack Query) или хотя бы в отдельный хук с кэшем и отменой.

6. События окна/документа
Если обработчик не использует реактивные данные — храните его в useRef и вешайте один раз. Если использует — чаще всего достаточно мемоизировать колбэк и вешать/снимать один раз.

const handlerRef = useRef<(e: KeyboardEvent) => void>(() => {});
handlerRef.current = (e) => { /* читаем актуальные значения из замыканий/рефов */ };

useEffect(() => {
  const onKey = (e: KeyboardEvent) => handlerRef.current(e);
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

Мини-чеклист «нужен ли тут эффект?»

- Это побочный эффект вне React (I/O, подписка, таймер, манипуляция DOM)? → Да — useEffect.
- Это чистое вычисление на основе пропсов/стейта? → Нет эффекта, используем выражение/useMemo.
- Можно ли пересчитать при рендере без записи в стейт? → Делайте это.
- Будет ли этот эффект легко зафлапать гонками? → Пересмотрите дизайн.

✍️ @React_lib

Формы без боли: react-hook-form + zod = схема в центре, минимум ререндеров

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

1) Схема — источник правды

import { z } from 'zod';

export const userSchema = z.object({
  email: z.string().email(),
  age: z.number().int().min(18),
  newsletter: z.boolean().default(false),
});
export type UserForm = z.infer<typeof userSchema>;

2) Инициализация формы с резолвером

import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const UserForm = ({ initial }: { initial?: Partial<UserForm> }) => {
  const methods = useForm<UserForm>({
    resolver: zodResolver(userSchema),
    defaultValues: { newsletter: false, ...initial },
    mode: 'onChange', // мгновенная подсветка ошибок
  });

  const { handleSubmit, formState: { isSubmitting, errors } } = methods;

  const onSubmit = async (data: UserForm) => {
    // маппим серверные ошибки обратно в форму при необходимости
    // setError('email', { type: 'server', message: 'уже занято' })
    await api.saveUser(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Input name="email" label="Email" />
        <NumberInput name="age" label="Возраст" />
        <Checkbox name="newsletter" label="Подписаться" />
        {errors.root && <p className="error">{errors.root.message}</p>}
        <button disabled={isSubmitting}>Сохранить</button>
      </form>
    </FormProvider>
  );
};

3) Поля - через контекст, с мемоизацией

import { useFormContext, Controller } from 'react-hook-form';

// Простой контролируемый инпут с минимальными ререндерами
export const Input = React.memo(({ name, label }: { name: string; label: string }) => {
  const { register, formState: { errors } } = useFormContext();
  return (
    <label>
      {label}
      <input {...register(name)} />
      {errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
    </label>
  );
});

// Пример для нестандартного компонента через Controller
export const NumberInput = React.memo(({ name, label }: { name: string; label: string }) => {
  const { control, formState: { errors } } = useFormContext();
  return (
    <label>
      {label}
      <Controller
        control={control}
        name={name}
        render={({ field }) => <input type="number" {...field} />}
      />
      {errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
    </label>
  );
});

4) Динамические списки - useFieldArray

const { control } = useFormContext();
const { fields, append, remove } = useFieldArray({ control, name: 'phones' });

Храните массивы в форме, рендерите по fields, добавляйте/удаляйте кнопками - ререндерится только нужный участок.

5) Практические советы

- Включайте DevTools формы только в dev.
- Ошибки сервера маппьте через setError, а не кидайте alert.
- При редактировании сущности меняйте key формы (<form key={user.id}>) — проще, чем делать reset в куче мест.
- Дорогие поля оборачивайте в React.memo, а вычисления — в useMemo.

✍️ @React_lib