Optimizing Checkbox State Handling in @elastic/react-search-ui to Prevent Unnecessary Re-renders

Elastic Search
1

I'm using @elastic/react-search-ui to display a list of search results and each one has a checkbox attached to it. I’m encountering an issue where, whenever a checkbox in a result item is toggled, all results are re-rendered. My goal is for only the modified result to re-render instead.

The Results component from @elastic/react-search-ui handles the mapping of items, and I’m wrapping each result item in my custom CustomSearchResultView component, where each item includes a checkbox. Despite using React.memo and passing an itemsCheckedState object for individual checkbox states, all items are re-rendered whenever any checkbox is checked or unchecked.

Here’s a simplified version of my code:

import CustomSearchResultView from "@/components/search-components/CustomSearchResultView/CustomSearchResultView";
import { Results } from "@elastic/react-search-ui";
import styles from "./ResultsList.module.scss";
import cn from "classnames";

interface ResultsListProps {
  itemsCheckedState: {
    [key: string]: boolean;
  };
  setItemsCheckedState: React.Dispatch<
    React.SetStateAction<{
      [key: string]: boolean;
    }>
  >;
}

const ResultsList: React.FC<ResultsListProps> = ({
  itemsCheckedState,
  setItemsCheckedState,
 
}) => {
  const MemoizedResults = React.memo(Results);

  return (
    <div>
      <MemoizedResults
        resultView={(resultView) => (
          <div key={resultView.result.id.raw}>
            <CustomSearchResultView
              resultView={resultView}
              itemsCheckedState={itemsCheckedState}
              setItemsCheckedState={setItemsCheckedState}
              key={resultView.result.id.raw}
            />
          </div>
        )}
      />
    </div>
  );
};

export default ResultsList;

In CustomSearchResultView, I have a console.log statement that logs whenever the component renders. When I click on a checkbox for a single item, the console.log is triggered for all items, indicating that they’re all re-rendering.

Thanks in advance!

2

I found this conversation (Link) from 2020 that seems to be the same issue - has anyone ever found a way to prevent this?

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.