React.memo 不适用于功能组件

Question

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!

Answer 1

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 .