React обновляется: важные релизы, компонент и безопасность npm в Twir #250

Выпуск This Week In React под номером 250 получился насыщенным: в центре внимания — важные обновления в ядре React, масштабный релиз Expo SDK 54, проблемы безопасности в экосистеме npm, а также множество интересных инструментов и экспериментов в мире фронтенд-разработки.

Одним из главных анонсов стал экспериментальный, но уже близкий к стабильному компонент , представленный в канареечной версии React. Этот компонент позволяет временно скрывать поддерево React-компонентов, при этом сохраняя их состояние и продолжая рендеринг с пониженным приоритетом. Это открывает новые горизонты для предзагрузки интерфейсов, ускоряя переходы между страницами, навигацию по вкладкам и взаимодействие с историей браузера. Уже сейчас тестируется в продуктивной среде Meta, а совсем скоро может появиться в таких фреймворках, как Next.js App Router (в версии 15.6), где он уже используется для реализации экспериментального кэша навигации назад/вперед.

В дополнение к этому важному релизу, стоит отметить выход Expo SDK 54. Это последний релиз, поддерживающий старую архитектуру, и он включает огромное количество обновлений. Среди них — улучшения производительности, новые API, обновления библиотек и исправления ошибок. Обновление знаменует собой переход к новой архитектуре, что важно для разработчиков, стремящихся к более устойчивому и масштабируемому коду в React Native.

На фоне этих технических достижений продолжаются проблемы с безопасностью в npm. На этот раз экосистему поразил вредоносный код под названием Shai-Hulud, который заражает аккаунты разработчиков и автоматически распространяет компрометированные пакеты. Это серьёзное напоминание о необходимости контролировать зависимости и использовать современные инструменты защиты, такие как новый механизм защиты в версии pnpm 10.16, который предоставляет дополнительные возможности для предотвращения подобных атак.

React Query и другие инструменты управления состоянием продолжают развиваться, предлагая разработчикам больше гибкости и производительности при работе с асинхронными данными. Также обсуждается поведение хука useEffect: разработчики все чаще обращают внимание на его побочные эффекты и ищут более предсказуемые и управляемые подходы к синхронизации состояния.

Sentry теперь поддерживает агрегирование логов, ошибок и трассировок в одном интерфейсе. Это особенно полезно для React-разработчиков, позволяя им быстрее находить и устранять проблемы, не переключаясь между множеством вкладок и инструментов. Интеграция с React делает логи более наглядными и контекстуально богатыми, что значительно упрощает отладку.

Среди забавных и экспериментальных тем обсуждаются такие дизайнерские концепты, как "Squircle" — форма, сочетающая в себе квадрат и круг, которую активно применяют в UI-дизайне, особенно в приложениях под iOS. Также обсуждаются визуальные эффекты вроде "жидкого стекла" и размытия фона на iOS, которые становятся всё более популярными благодаря поддержке в современных браузерах и фреймворках.

В сфере стандартов JavaScript активно работает комитет TC39: обсуждаются новые предложения, включая улучшения в синтаксисе языка, оптимизации производительности и расширение возможностей типов данных. Это напрямую влияет на развитие фреймворков, в том числе React, так как даёт разработчикам доступ к более выразительным конструкциям языка.

Фронтенд-инструменты вроде Bun и Browserslist продолжают эволюционировать. Bun обещает стать ультрабыстрым JavaScript-рантаймом и сборщиком, а Browserslist помогает разработчикам точно определять, какие браузеры стоит поддерживать, что особенно важно в условиях стремительного обновления движков и стандартов.

Отдельное внимание уделяется CSS-in-JS решениям. Несмотря на то, что тема вызывает споры, множество команд продолжает использовать такие подходы как styled-components и Emotion, особенно в больших проектах с динамическими интерфейсами. Появляются новые библиотеки и методики, направленные на улучшение производительности и читаемости кода, а также на более тесную интеграцию с серверным рендерингом и современными сборщиками.

В разделе "вдохновение и фановость" — проекты Lynx и DataList. Lynx — это легковесный браузер, ориентированный на CLI, а DataList — UI-компонент для удобного отображения и фильтрации больших объемов данных. Такие эксперименты вдохновляют разработчиков на новые подходы к созданию интерфейсов и взаимодействию с пользователем.

Также стоит отметить, что всё чаще обсуждается влияние искусственного интеллекта на разработку. AI-инструменты уже помогают генерировать код, предлагать оптимизации и автоматически находить ошибки. Однако важно помнить, что такие технологии не заменяют разработчиков, а лишь усиливают их возможности.

Подводя итог, можно сказать: React и экосистема вокруг него продолжают активную трансформацию. Появление новых компонентов, улучшение инструментов, борьба с уязвимостями и внедрение дизайнерских трендов — всё это формирует облик современного фронтенда. Для разработчиков это отличное время, чтобы оставаться в курсе, экспериментировать и внедрять лучшие практики в своих проектах.

Прокрутить вверх