🧠 Зачем нужен React Query и как он меняет подход к загрузке данных

Привет! Сегодня я хочу рассказать вам о библиотеке, которая стала для меня must-have в любом проекте на React — React Query.

Если вы всё ещё пишете useEffect + fetch + useState, чтобы загрузить данные, ловите инсайт: это можно делать проще и мощнее.

Вот чем React Query реально помогает:

✅ Автоматический кеш: данные не перезагружаются каждый раз при переходе между страницами.
✅ Повторные запросы при восстановлении соединения или фокусе окна.
✅ Мутации (POST, PUT и т.д.) с оптимистичным обновлением UI.
✅ Умное управление состояниями: isLoading, isError, data, refetch — всё под рукой.
✅ Простая интеграция с TypeScript.

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

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(res => res.json())
});

🔥 Всё, никакого useEffect! А самое крутое — когда ты добавляешь бесконечный скролл или пагинацию — React Query делает это почти без боли.

Если ещё не пробовал — обязательно покрути. Это прям реальный буст продуктивности.

Пользуешься ли ты React Query? Или у тебя другой фаворит — SWR, TanStack Query, Apollo?

Давай обсудим 👇

✍️ @React_lib

Правило ESLint для обнаружения избыточного состояния в React

✍️ @React_lib

Секреты React-разработки. Создай React-портфолио с нуля шаг за шагом

👉 Полный цикл разработки: от первой строки кода до деплоя
👉 Создаём современный и динамичный сайт на React
👉 Полное руководство (4 часа 42 минуты)

Сегодня я собрал в одном видео весь процесс создания портфолио на React с нуля! 🎥 В этом выпуске мы пройдём все этапы: от вёрстки и компонентов до анимации, переключения тем и финального деплоя.

💡 Что вы узнаете в этом видео:

🔹 Разработка структуры портфолио: создаём секции Home, About, Skills, Services, Portfolio, Clients, Contact.
🔹 Работа с React-компонентами: используем useState, useEffect, props и массивы данных.
🔹 Добавление анимации с Motion: оживляем интерфейс и создаём плавные переходы.
🔹 Переключение тем (светлая/тёмная): реализуем через useState и сохраняем в LocalStorage.
🔹 Динамическое меню и кнопка "Вверх": улучшаем навигацию и пользовательский опыт.
🔹 Деплой на Netlify: публикуем проект и делаем его доступным онлайн.


⏱️ Таймкоды:

00:07 — Обзор проекта - что мы будем разрабатывать в React
00:35 — Настройка окружения перед началом работы в React
15:53 — Создаём структуру проекта и компоненты
25:10 — Импортируем и подключаем картинки в проект
31:09 — Создаём компонент Header с меню навигации
57:50 — Разрабатываем секцию Home в React
01:05:05 — Создаём секцию About с данными о разработчике
01:13:30 — Добавляем секцию Skills с анимацией и эффектами
01:31:01 — Переходим к блоку Work Experience: оформление и логика
01:36:02 — Создаём секцию Services: карточки услуг и стили
02:02:49 — Разрабатываем секцию Portfolio с проектами
02:19:29 — Добавляем блок Next Project для перелистывания работ
02:24:35 — Создаём секцию Our Clients с отзывами и логотипами
02:44:38 — Разрабатываем секцию Contact с формой обратной связи
02:58:10 — Исправляем баг: убираем скролл при открытии мобильного меню
03:01:57 — Добавляем плавное появление popup в секции Portfolio
03:04:10 — Создаём секцию Footer с контактами и ссылками
03:22:00 — Добавляем кнопку "Вверх" для удобной навигации
03:28:33 — Реализуем переключение тем (светлая/тёмная) с сохранением
03:38:51 — Анимация элементов с помощью библиотеки React Motion
03:43:56 — Разбираем работу Motion: ключевые атрибуты и настройки
03:45:22 — Выносим анимацию в отдельный файл для удобства
04:19:07 — Обзор будущих проектов, которые можно реализовать
04:37:53 — Финальный деплой проекта на Netlify
04:42:23 — Всем мира и добра! 🚀😊

источник

✍️ @React_lib

⚡️Хотите научиться писать надежные тесты для React-приложений и улучшить свои навыки в тестировании?

Присоединяйтесь к открытому уроку «Тестирование React-приложений с помощью React Testing Library» 23 июля в 20:00 МСК! Разберем:
- Основы React Testing Library (RTL): философию и ключевые принципы.
- Разницу между RTL и Enzyme, и почему RTL — лучший выбор.
- Как тестировать рендеринг, события, асинхронный код и кастомные хуки.

Это отличная возможность перед стартом курса «React.js Developer» от OTUS. Все участники получат скидку на обучение и полезные материалы для дальнейшего изучения.

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

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

⚛️ Как я ускоряю загрузку React-приложения с помощью динамического импорта

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

Вот базовый пример:

import React, { Suspense } from 'react';

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

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

🧠 Что происходит:

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

📌 Совет:
Используй ленивую загрузку для:

- страниц внутри роутинга (React Router + lazy)
- редко используемых компонентов (например, SettingsModal)
- тяжёлых графиков, таблиц, дашбордов

🔥 Бонус:
Если хочешь ещё тоньше контролировать загрузку, подключи React Loadable или @loadable/component, которые дают больше гибкости и SSR поддержку.

А вы используете ленивую загрузку в своих проектах? Делитесь кейсами 👇

✍️ @React_lib

📊 Tremor — готовые React-компоненты для дашбордов.

Tremor предлагает более 35 настраиваемых и доступных компонентов React для создания информационных панелей и современных веб-приложений. Создан на основе Tailwind CSS и Radix UI.

https://github.com/tremorlabs/tremor

✍️ @React_lib

💪 Хотите работать в финтехе? Освойте Solidity!

👉 Востребованное обучение для разработчиков с опытом программирования от года, которые хотят получить навыки написания кода и аудита безопасности, чтобы попасть в одну из самых перспективных и высокооплачиваемых сфер IT.

Освойте разработку децентрализованных приложений на профессиональном уровне всего за 5 месяцев на онлайн-курсе «Solidity Developer» от OTUS!

Забудьте о скучном обучении — здесь вас ждут настоящие челленджи и нестандартные практические решения. А еще крутые проекты для портфолио!

👉 Пройдите вступительные тест для оценки подходит ли вам курс: https://vk.cc/cNUydi

🎁 Получите welcome скидку для успешное прохождение теста. Подробности уточняйте у менеджера.

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

Возможно, вам не нужен useEffect (версия с ref‑колбэками)

В React хук useEffect часто используют для выполнения кода после монтирования компонента: подписки, измерения DOM-элементов, вызовы API и т. д. Но в некоторых случаях — особенно когда нам нужно только получить доступ к DOM-элементу — useEffect оказывается избыточным.

Что предлагают вместо useEffect?

Ref-колбэки.
Вместо того чтобы ждать монтирования и использовать useEffect, можно передать функции-колбэку ссылку (ref). Этот колбэк автоматически вызовется, когда элемент появится или исчезнет в DOM.

Когда использовать?

- Для измерения DOM (размеры, позиция).
- Для инициализации библиотек, которые работают с элементом.
- Для управления фокусом.

Если нужно реагировать на изменения состояния или выполнять сложные сайд-эффекты — тогда useEffect остаётся правильным выбором.

✍️ @React_lib

Как я ускоряю разработку с помощью React DevTools

Сегодня хочу поделиться инструментом, без которого я уже не представляю работу — React DevTools.
Многие его ставят "для галочки", но реально используют только для просмотра компонентов. А ведь он может сильно ускорить разработку, если выжать из него максимум.

Вот что реально помогает:

1. Профайлер — если у вас страница перерисовывается дольше, чем хотелось бы, откройте вкладку Profiler. Там видно, какие компоненты рендерятся лишний раз и сколько это занимает времени.
2. Поиск по дереву компонентов — если проект большой, можно быстро найти нужный компонент прямо в DevTools (Cmd/Ctrl + F).
3. Редактирование пропсов на лету — в режиме разработчика можно менять пропсы и сразу видеть результат без пересборки проекта.
4. Highlight updates — включает подсветку обновляемых компонентов. Очень удобно, чтобы найти “лишние” рендеры.

Если вы еще не используете хотя бы профайлер и подсветку рендеров — попробуйте. Уже через пару дней вы начнете понимать, где проект "проседает" и что можно оптимизировать.

А вы часто заглядываете в Profiler или больше по старинке — console.log и догадки? 😄

✍️ @React_lib

🤩Хотите, чтобы ваши 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