Component rendered 8 times - reactjs

Question

I don't understand clearly why Row component rendered 8 times. Should I use custom comparing function in React Memo for this component? I'm using the react-window package. Please explain how it works for me. Thanks a lot.
Parent component of ListView: CovidMap Component
My entire project: Github
This is my code:
import React, { useRef, memo, useEffect } from 'react';
import { FixedSizeList as FixedList, areEqual } from 'react-window';
import './ListView.scss';
const ListView = (props) => {
const listRef = useRef();
const Row = memo((props) => {
console.log('Row rendering...');
const { data, index, style } = props;
const className =
data.itemIndex === index
? 'PatienIndicator Highlight'
: 'PatientIndicator';
return (
<button
key={index}
className={className}
onClick={() => data.onClickPatient(data.patients[index])}
style={style}
>
{data.patients[index].name}
</button>
);
}, areEqual);
const patientsLength = props.patients
? Object.keys(props.patients).length
: 0;
const data = Object.assign(
{},
{ patients: props.patients },
{ onClickPatient: props.onClickPatient },
{ itemIndex: props.itemIndex }
);
console.log('List View rendering...');
useEffect(() => {
if (props.itemIndex) {
listRef.current.scrollToItem(props.itemIndex, 'smarter');
}
});
return (
<FixedList
className="List"
height={300}
itemCount={patientsLength}
itemSize={50}
width={'100%'}
ref={listRef}
itemData={data}
>
{Row}
</FixedList>
);
};
export default memo(ListView);

Answer 1

The itemCount prop tells FixedSizeList how many rows to render, so your list will render however many items are in your props.patients list, which is ultimately coming from the result of filtering the array returned by the fetch in the parent component. The index prop that you're using in the Row component is passed to the Row from FixedSizeList and refers to its position in the list, so it tells the first instance of the Row component that its index is 0, and Row uses that information to render the name of the first item in the data.patients prop. FixedSizeList passes its own itemData prop to each Row component as Row's data prop.
From the react-window documentation for the FixedSizeList component:
itemCount: number
Total number of items in the list. Note that only a few items will be rendered and displayed at a time.
and
children: component
React component responsible for rendering the individual item specified by an index prop
You're passing the Row component to FixedSizeList as a child, so it renders the Row component itemCount number of times.
React memo won't affect the number of instances of the component. All memo does is potentially improves performance of rendering each instance by reusing its last rendered version if the props haven't changed.