I tried using React.memo() to prevent re-rendering on one of my components but it keeps on re-rendering whenever there are changes on its Parent Component.
Here's my child component with React.memo()
const Transactions = React.memo(() => {
console.log('rerender')
return (
<></>
)
})
Here's where it's being called. Whenever I click the Add button it calls the state function setModal(true), Transactions component is being re-rendered
const ScholarHistory = ({setModal}) => {
return (
<div className="pml-scholar pml-scholar--column">
<div className="pml-scholar-container">
<button onClick={() => setModal(true)} className="pml-scholar-add-button"> Add </button>
</div>
<Transactions />
</div>
)
}
I am new to React and been exploring/creating wider projects. Any ideas why it keeps on re rendering? Thanks!
I tried to remove the setModal prop on the ScholarHistory Component and was able to prevent the re-rendering.
I am not sure what causes it as it has no relation at all to the child component other than being a prop to the parent component - ScholarHistory.