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

Question

[bzotsss]

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

Comments

[WbICHA]

const sortData = (field) => {
    let sortArray;
    if (field === sortFields.state) {
      sortArray = sortUpObjData(usersToSort, field);
    }
    if (!directionSort && field === sortFields.state) {
      sortArray = sortDownObjData(usersToSort, field);
    }
    if (directionSort) {
      sortArray = sortUpData(usersToSort, field);
    }
    if (!directionSort) {
      sortArray = sortDownData(usersToSort, field);
    }
    setDirectionSort(!directionSort);
  };

Мать моя женщина, какой прелестный код... Прям комбо из неиспользуемой переменной и ужасных условий (к тому же ещё и неверных).

Answer 1

[Alexandroppolus]

убрать данный useState из MainPage

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

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

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

прочее не смотрел, но не удивлюсь, если ещё есть какая ересь на местах..