Миф про ре-рендеры
Вам когда-нибудь говорили, что вот так передавать массив — плохая практика?
<Component levels={[1, 2, 3]} />Ведь массив будет пересоздаваться в JSX при каждом ре-рендере, то есть пропсы будут меняться и запускать ненужные ре-рендеры Component?
И вы наверняка слышали, что нужно использовать useMemo (const levels = useMemo(() => [1, 2, 3], []))
или объявить массив вне компонента?
Я слышала это много раз. И следовала этому принципу.
Даже когда я столкнулась с кейсами, что при передаче в пропсы ref объекта и обновлении этого объекта потом — компонент не перерисовывается, я всё равно продолжала избегать передачи вот таких массивов и объектов как пропсов. Я просто не соединила в своей голове эти две простые вещи: если обновление пропсов должно приводить к ре-рендеру, тогда это должно работать и с ref, не так ли?
Сейчас я читалю Advanced React от Nadia Makarevich, и автор пишет, что одно из главных заблуждений:
Миф про ре-рендеры: Компонент перерисовывается, когда изменились пропсы.
React обновляется, когда происходит обновление стейта. И в этом случае, он перерендерит все вложенные компоненты, изменились их пропсы или нет.
В контексте ре-рендеров, изменились пропсы компонента или нет важно только в одном случае: если этот компонент обернут в HOC React.memo.
Посмотрите на примере с кодом: https://codesandbox.io/p/sandbox/props-rerender-dcq97c.
И всё! Нужно поменять способ мышления — перенести фокус с изменения пропсов на анализ изменений стейта.
P.S. Сама я для константных объектов / массивов предпочитаю создавать constants.ts и объявлять
их там, но это дело личного вкуса и никак не связано с ре-рендерами.