💪 Хотите работать в финтехе? Освойте 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