Preact давно позиционируется как легковесная альтернатива React, но с выходом версии 11 библиотека делает значительный шаг вперёд. Новые возможности, такие как Hydration 2.0 и автоматическая передача refs, открывают новые пути оптимизации производительности и упрощают миграцию существующих React‑проектов. В этом обзоре мы разберём, что именно изменилось, как это влияет на разработчиков и какие практические шаги можно предпринять, чтобы быстро воспользоваться новыми функциями.
Context and practical value
Title and feed description detail Preact 11 release, highlighting Hydration 2.0, automatic refs, Object.is comparison, and extended React compatibility.
Article expands on the brief description by explaining how each new feature works, providing practical migration steps, and discussing implications for performance and developer experience.
Tutorial profile
- Format: how_to
- Topic: frontend
- Audience: intermediate
- Tools: preact
Key takeaways
- Hydration 2.0 позволяет асинхронным границам содержать несколько или ни одного DOM‑узла.
- Refs теперь автоматически передаются через props, избавляя от необходимости использовать forwardRef.
- Сравнение аргументов хуков теперь выполняется через Object.is, как в React.
- Расширена совместимость с React: добавлены use(), useEffectEvent() и доступен createPortal напрямую.
- Preact 11 продолжает догонять React, предлагая более тесную интеграцию с экосистемой.
Hydration 2.0: как работает?
Hydration 2.0 меняет правила игры, позволяя асинхронным границам включать несколько DOM‑узлов или вовсе их не содержать. Это устраняет ограничения, которые существовали в предыдущих версиях, и повышает гибкость при работе с серверным рендерингом.
Автоматическая передача refs
Теперь refs можно передавать через обычные props без использования forwardRef. Это упрощает код и делает его более читаемым, особенно в больших компонентах.
Object.is в хуках
Сравнение значений в аргументах хуков теперь происходит через Object.is, что делает поведение Preact более предсказуемым и совместимым с React.
Расширенная совместимость с React
В preact/compat добавлены use(), useEffectEvent() и другие API, а createPortal теперь доступен напрямую из preact. Это облегчает миграцию проектов и позволяет использовать большинство инструментов React‑экосистемы.
Practical next steps
- Обновите зависимость preact до версии 11 в вашем проекте.
- Проверьте, что ваши компоненты используют новые API, такие как useEffectEvent().
- Тестируйте Hydration 2.0 на серверном рендеринге, чтобы убедиться, что асинхронные границы работают корректно.
- Проверьте передачу refs через props в существующих компонентах, чтобы избежать лишних forwardRef.
Limits and verification
- Описание не содержит примеров кода, поэтому детали реализации необходимо уточнить в официальной документации.
FAQ
Поддерживает ли Preact 11 TypeScript?
Да, Preact 11 полностью совместим с TypeScript, как и предыдущие версии.
Можно ли использовать Preact 11 в проектах, где уже используется React?
Да, благодаря расширенной совместимости с React, можно постепенно мигрировать или использовать Preact как альтернативу в отдельных частях приложения.