Слоты в реакте

Я уже писал про исправление мемоизации, которое не является стандартным паттерном работы с реактом. Сегодня продолжим эту тему и поговорим о слотах.

Слот — это специальный аргумент / атрибут / проп компонента, который подразумевает передачу другого компонента, для его отрисовки ниже по дереву. Это актуальный паттерн для компонентов высшего порядка и часто встречается в любом приложении.
В реакт экосистеме ошибочно считается что любой проп может быть слотом, т.к. children это такой же проп. Проблема, которая уже описывалась в канале “Горшочек варит” (классный канал, рекомендую), заключается в том, что JSX тег отдает всегда новый иммутабельный объект, который будет ломать мемоизацию компонента контейнера.

Из моей практики очевидно, что изменение children происходит внутри компонента очень редко, практически всегда они просто перепрокидываются и вызывают избыточный ререндер, даже если остальные пропы не поменялись.

Правильные слоты прокидывают некий “портал” к передающимся чилдренам и не трогают сам рендер компонента. В этом примере можно посмотреть подобную реализацию на контексте.

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

Рома Дворнов делился более оптимальным и рабочим решением, но с ним реакт выкидывает варнинги в консоль, хотя я не знаю какую проблему оно может повлечь.

Мне не понятно, почему в реакте нет встроенного нормального решения для слотов, хотя о них упоминается в документации.

#perf