#002 — React 19.2: <Activity /> + AI Language Teacher

Дата: 22 травня 2026
Формат: Технічний розбір + Гість · ~40 хвилин
Гість: Олександр Блажейко
YouTube: youtube.com/live/R5IXxa1e8K4

Учасники

Олег Левченко — Senior Full Stack JavaScript Developer (React / Node.js / AWS)
The AA · Cardiff, UK
YouTube @zloyleva · itfriday.community

Олександр Блажейко — Software Development Engineer · Fullstack, 7+ років досвіду
Україна
LinkedIn · itvibe.party

Будує itvibe.party — платформу, що поєднує чат, синхронний AI-перекладач і персонального AI-вчителя. Реальна розмова автоматично перетворюється на урок: нові слова, граматика, домашнє завдання. Стек: Vue 3, Node.js, TypeScript, WebSocket, Redis, LLM/STT/TTS.

Ключові тези

Блок 1 — React 19.2: <Activity />

• React Conf 2025 анонсувала новий компонент <Activity /> для збереження стану при приховуванні UI
• Проблема: display:none приховує елемент, але знищує стан; unmount — теж втрата стану
• <Activity mode="hidden"> зберігає стан і DOM-дерево — схоже на content-visibility: hidden але на рівні React
• Effects lifecycle відрізняється: при переході в hidden — cleanup, при поверненні — setup знову
• Pre-rendering: можна рендерити прихований контент наперед для швидшого показу
• Gotchas: не підходить для секьюрного приховування (DOM все одно існує), збільшує memory footprint

Блок 2 — itvibe.party (Олександр Блажейко)

• itvibe.party — платформа що поєднує чат, синхронний AI-перекладач і персонального AI-вчителя "Маестро"
• Головна ідея: реальна розмова двох людей різними мовами → STT → LLM-переклад → TTS → автоматичний урок з новими словами та граматикою
• Стек: Vue 3, Node.js, TypeScript monorepo (pnpm), uWebSockets.js, Redis, Drizzle ORM
• AI-інтеграції: OpenAI, xAI, Mistral — ізольовані в backend service layer, ключі не потрапляють на клієнт
• Архітектура backend: controller → service → repository → transformer

Таймкоди

Будуть додані після перегляду запису.

Ресурси

• React <Activity /> — офіційна документація
• Telegram-ком'юніті
• Discord-сервер