Building Bulletproof React Components Один из разработчиков Vercel написал короткий гайд, как делать "пуленепробиваемые" компоненты. Суть в том, что большинство компонентов пишутся под happy path — они работают, пока не сталкиваются с реальным миром: SSR, гидрация, несколько инстансов, конкурентный рендеринг, порталы и т.д. В статье с примерами кода разбираются 10 аспектов, которые нужно учитывать: 1. Server-Proof — не используйте localStorage или другие браузерные API напрямую в рендере, выносите в useEffect 2. Hydration-Proof — код может работать по разному на сервере и в браузере. Популярные проблемы - таймзоны, адаптив через код, темы. Учитывайте это. 3. Instance-Proof — учитывайте, что компонент может быть инстансирован несколько раз на странице. Например, используйте useId() вместо захардкоженных id 4. Concurrent-Proof — несколько компонентов (или несколько параллельных запросов к серверному рендеру) могут привести к дубликации запросов в API или БД. Добавляйте кеширование и дедубликацию запросов. 5. Composition-Proof — React.cloneElement может не сработать для серверных компонентов. Для кейсов передачи данных при композиции используйте контекст 6. Portal-Proof — вместо window используйте ref.current?.ownerDocument.defaultView для обработчиков событий, иначе они не будут работать в iframe и порталах 7. Transition-Proof — для анимаций с <ViewTransition> в React 19 оборачивайте изменения стейта в startTransition() 8. Activity-Proof — если компонент инжектит глобальные стили, используйте media="not all" чтобы отключать их когда компонент скрыт через <Activity> 9. Leak-Proof — используйте taintUniqueValue чтобы предотвратить случайную утечку токенов и секретов из серверных компонентов в клиентские компоненты. Это экспериментальная фича, которая позволяет развалить рендер с кастомной ошибкой, если клиентский код попробует достучаться до запрещенного значения 10. Future-Proof — не используйте useMemo как хранилку данных. useMemo создан для улучшения перформанса. Если вам нужно хранить данные - используйте useState. Крутой и простой чеклист того, что следует учитывать при разработке приложений. https://shud.in/thoughts/build-bulletproof-react-components #development #react #ssr #hydration #components #performance #security #quality