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

**URL:** <https://discuss.elastic.co/t/optimizing-checkbox-state-handling-in-elastic-react-search-ui-to-prevent-unnecessary-re-renders/370560>\
**Category:** Elastic Search\
**Created:** [November 14, 2024, 2:36pm UTC](https://discuss.elastic.co/t/optimizing-checkbox-state-handling-in-elastic-react-search-ui-to-prevent-unnecessary-re-renders/370560 "2024-11-14T14:36:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kudumine](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kudumine/32/138227_2.png) [@kudumine](https://discuss.elastic.co/u/kudumine)\
**Post date:** [November 14, 2024, 2:36pm UTC](https://discuss.elastic.co/t/optimizing-checkbox-state-handling-in-elastic-react-search-ui-to-prevent-unnecessary-re-renders/370560/1 "2024-11-14T14:36:56Z")

</div>

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
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!

---

<div class="post-metadata">

**Author:** ![kudumine](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kudumine/32/138227_2.png) [@kudumine](https://discuss.elastic.co/u/kudumine)\
**Post date:** [November 19, 2024, 9:54am UTC](https://discuss.elastic.co/t/optimizing-checkbox-state-handling-in-elastic-react-search-ui-to-prevent-unnecessary-re-renders/370560/2 "2024-11-19T09:54:36Z")

</div>

I found this conversation ([Link](https://discuss.elastic.co/t/react-search-ui-is-remounting-its-children-on-state-or-prop-update/254501)) from 2020 that seems to be the same issue - has anyone ever found a way to prevent this?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 17, 2024, 9:55am UTC](https://discuss.elastic.co/t/optimizing-checkbox-state-handling-in-elastic-react-search-ui-to-prevent-unnecessary-re-renders/370560/3 "2024-12-17T09:55:34Z")

</div>

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