Что если сделать ссылочную стабильность частью системы типов TypeScript?
Концепция stableref: брендированные Stable-типы, строгие пропсы и хуки для проверки стабильных ссылок на этапе компиляции.
Главная боль при работе с React.memo, useCallback или useMemo — их вычисления ломаются тихо и незаметно. Достаточно прокинуть в пропсы инлайн-массив [1, 2, 3] или обычную стрелочную функцию, как ссылочная целостность рушится, мемоизация слетает, а компонент начинает рендериться на каждый чих родителя.
При этом TypeScript молчит: с точки зрения стандартной системы типов инлайн-массив ничем не отличается от массива, обёрнутого в useMemo.
Джови де Крук (Jovi DeCroock) задался вопросом: «А что, если закодировать правила ссылочной стабильности фреймворка прямо в типы?» И выкатил классную концептуальную библиотеку stableref.
Как это работает:
- Branded Types: Вводятся брендированные типы вроде
Stable<T>, определяющие ссылку как гарантированно стабильную между рендерами. - Жесткая типизация пропсов: Если мемоизированный компонент требует
Stable<Item[]>, прокинуть туда обычный массив[1, 2]не получится — TypeScript сразу выбросит Type Error строго на этапе компиляции. - Рантайм без сюрпризов: Больше не нужно с профилировщиком в DevTools ловить причины постоянных перерисовок — ошибки нестабильных ссылок подсвечиваются прямо в IDE в момент написания кода.
- Хуки-обёртки: Кастомные
useCallbackиuseMemoиз библиотеки возвращают именноStable-ссылки, которые и запрашивает компонент.
По сути, это попытка переложить контроль за мемоизацией с рантайма на статическую проверку типов.
Читать подробный разбор у автора
Как вам идея? Затащили бы такие строгие проверки ссылок в свои TS-проекты или React Compiler / компиляция фреймворков в итоге полностью закроют эту боль?