Как избежать перерисовки компонента?

Question

[dualdeazz]

У меня есть какой-то компонент Component, в котором есть component.title, если изменить любой из Component, произойдет перерисовка всех Component в дереве, а если их будет 100 тысяч и т д, то работа сильно замедлится, как избежать этого и перерисовывать только тот компонент, в котором были произведены изменения?

Comments

[Dmitry Bay]

key?

Answer 1

[Alexandroppolus]

если их будет 100 тысяч

то надо просто взять react-window и... использовать по назначению

а так - вышеупомянутый key, React.memo, и прочая..

Answer 2

[Семён Федосеев]

Пожалуйста, проявите уважение к участникам портала указывая более конкретные исходные данные и описание Вашего вопроса.

React перерисовывает компонент и родительский в том числе чаще всего при изменении состояния дочернего компонента. Это происходит из-за неверной архитектуры приложения. Вероятно, Вы не в полной мере изучили как необходимо рендерить сторонние глобальные функции в компоненте или не в полной мере освоили работу с жизненным циклом компонента.

Для перерисовки только конкретного компонента, в котором были изменения, не передавайте пропсы или контекст зависящие от изменения другого компонента. Изолируйте состояние через useState или Store (Redux, MobX и др.) только в этом компоненте, не задействуя другие.

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

Попробуйте ознакомиться со следующим материалом:
https://habr.com/ru/companies/timeweb/articles/684718/