React Avoid Re-Render for Functional Component - reactjs

Question

I am using Hooks and how can I avoid from re-render? My purpose of asking this quesiton , I am using scroll for overflow item from div height and when I focus on a item using onMouseOver, my funtional component is rendering itself and scroll is returning initial position. Therefore I dont delete last item of div. Could you any advice to avoid re-rendering ?
My component :
import React from 'react'
type removeDisplayItem = {
dataId: number;
display: boolean
}
const PlayerCalendar = () => {
const [removeDisplayData, setRemoveDisplayData] = useState<removeDisplayItem>({ dataId: -1, display: false })
const handleRemove = (dataId: number, display: boolean) => {
const removeData = {
dataId: dataId,
display: display
}
setRemoveDisplayData(removeData)
}
const renderScheduleContentCell = (data: scheduleItem) => {
return (
<>
<div className="cell-content-wrapper" style={removeDisplayData.dataId === data.id && removeDisplayData.display === true ? { display: "none" } : { display: "flex" }}
onMouseOver={() => handleDisplayRemove(data.id, true)}>
<div className="start-time-text">{moment(data.startTime).format("HH:mm")}</div>
<div className="dash"> - </div>
<div className="end-time-text"> {moment(data.endTime).format("HH:mm")} </div>
</div>
<div className="cell-content-wrapper" onMouseLeave={() => handleDisplayRemove(data.id, false)}
style={removeDisplayData.dataId === -1 ? { display: "none" } : removeDisplayData.dataId === data.id && removeDisplayData.display === true ? { display: "flex", justifyContent: "space-between", backgroundColor: "#8c9296", color: "white", cursor: "pointer" } : { display: "none" }}
onClick={() => setCalendarRemoveItemConfirm(true)}>
<div className="dash"> </div>
<div className="start-time-text">Remove</div>
<div className="end-time-text"><i className="fas fa-trash-alt"></i></div>
</div>
</>
)
}
return (
{renderScheduleContentCell(exampleData)}
)
}
export default PlayerCalendar;

Answer 1

Try to use the memo HOC and wrap it around PlayerCalendar component.
React.memo can be use to optimize your component. When you have the same props / state it can be used to memoize the data.