How to prevent Carousel from rerendering - reactjs

Question

I am using React Grid Carousel in my app and have an images grid and a function that if an image in that grid is clicked it opens up a modal.
Here is some important bits of the code:
Parent component:
function parentComponent () {
return (
<section>
<div>
<h1>
Images
</h1>
</div>
<ChildComponent />
</section>
);
Child component:
function childComponent () {
const handleModal = useCallback(
e => {
setImageId(e.target.id);
setModalOpen(true);
},
[modalOpen, imageId]
);
}
const data = sectionData.map((data, i) => {
return data;
});
const items = data[0].map((item, i) => {
return (
<div id={i} onClick={e => handleModal(e)}>
<Image width={200} height={200} alt={item.name} />
</div>
);
});
return (
<Carousel
cols={2}
rows={3}
showDots
>
{items.map((item, i) => (
<Carousel.Item key={i}>
{item}
</Carousel.Item>
))}
</Carousel>
{modalOpen && <MemberModal/>}
);
The problem I am having is that if I am in let's say, page 2 of the modal, once I click in an image, the carousel goes back to the first page as the result of the rerender caused by the state change that happens on the handleModal.
I have tried React.memo this component and the parent too just in case and also using useCallback but nothing seems to work. I just simply cannot stop the rerender.
Any idea on how to accomplish stoping the rerender or sorting the issue at all?

Answer 1

React re-renders children components automatically after a state change. If your state is inside MyComponent it will re-render everything inside the return function.
But if you wrap the Carousel part of your component in memo, it will compare its props and if the props have not changed, it wont re-render the component.
const Example = ({ items }) => {
return (
<>
<Carousel
cols={2}
rows={3}
showDots
>
{items.map((item, i) => (
<Carousel.Item key={i}>
{item}
</Carousel.Item>
))}
</Carousel>
</>
);
};
export default React.memo(Example);