Предотвратить использование `useSelector` компонента рендеринга?

Question

У меня есть таблица с тысячами строк.

import React from "react"
import { useSelector } from "react-redux";
import { useEffect } from "react";
import Source from "../components/TranslationTable/Source";

const SourceContainer = React.memo((props) => {

  const suggestionArray = useSelector((state) => state.suggestions.suggestionArray );
  const isFetching = useSelector((state) => state.suggestions.isFetching);

  let source = props.source;

  if (props.shouldHighlight && !isFetching) {
     //I will have code here to highlight text at some point
  }


  return (
    <Source source={source}>{console.log("rendered")}</Source>
  )
}, (prevProps, nextProps) => {
  return true;
});

export default SourceContainer;

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

Проблема, с которой я столкнулся, заключается в том, что каждый отдельный компонент SourceContainer выполняет рендеринг каждый раз, когда фокусируется строка. Когда строка становится сфокусированной, isFetching становится истинным в состоянии избыточности, а suggestionArray становится равным массиву предложений на основе данных в выбранной строке.

Если я удаляю if оператор и переменную suggestionArray, компонент STILL повторно визуализируется. Это означает, что единственное, что требуется для повторного создания этой проблемы, - наличие неиспользуемой переменной useSelector (ifFetching).

Может кто-нибудь объяснить, как я могу использовать useSelector без повторного рендеринга компонента, когда значение состояния этого селектора меняется?

Answer 1

Используя useSelector, вы добавляете зависимость к своему Компоненту, и это нормально, когда он повторно визуализируется, если изменяется содержимое useSelector.

Хитрость в том, чтобы сделать менее изменяемый контент для вашей функции useSelector. Или, по крайней мере, что-то, что изменяется только в том случае, если компонент должен повторно выполнить рендеринг

. Например, из того, что я понимаю о том, чего вы пытаетесь достичь, ваш компонент должен меняться только в том случае, если "props.shouldHighlight &&! IsFetching" изменяет значение.

Если это так, то вы хотите сделать следующее:

const isFetching = useSelector((state) => (!state.suggestions.isFetching && props.shouldHighlight));