@bzotsss

Как предотвратить ре-рендер компонента state которого меняется в другом дочернем компоненте?

Всем привет , у меня есть компонент MainPage , так же есть компонент Card , стейт и функция для изменения стейта Card находится в MainPage . При изменении стейта по клику в Card просиходит ре-рендер MainPage . Хотелось бы узнать как можно предотвратить рендер компонента MainPage или же других компонентов вложеных в него . . Знаю что тут поможет useCallback и React.memo но не понимаю как именно нужно их применить . Для удобства залил проект на codesanbox - https://codesandbox.io/s/trusting-williams-7yxpb?f... , из-за чего что рендерится можно посмотреть в консоли .
  • Вопрос задан
  • 35 просмотров
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
убрать данный useState из MainPage

поскольку эти данные меняются в одном компоненте, а читаются в другом (соседнем), то каноничнее всего вынести их в стор, например в редукс, раз уж он тут.

useCallback и React.memo тоже понадобятся. Есть смысл мемоизить Table, он очень жирный. Соответственно для создания sortData не обойтись без useCallback.

есть и другие приколы. Например, sortUpData и прочие хелперы. Там мутабельно сортируется массив. Да-да, arr.sort(...) возвращает тот же самый объект массива, предварительно отсортировав. Это может приводить к потере перерендеров при изменении состояния. Для иммутабельности надо так: arr.slice().sort(...) - тут создается копия и сортируется.

прочее не смотрел, но не удивлюсь, если ещё есть какая ересь на местах..
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы