rendering of the child component-CodePudding

I have a child component:

const MemoModalWindow = memo(ModalWindow)
<MemoModalWindow show={show} handleClose={handleClose} rowValue={first} />

I pass props to it

show={show} - boolean,
handleClose={handleClose} - function, 
rowValue={**first**} - object,

And when I try to change the first object in the parent component, I have a re-render

const [first, setfirst] = useState<any>()
const handleClick = () => {
    setfirst({ id: 123 })
}

<button onClick={handleClick}>click</button>

After clicking on the button, my components will be re-rendered

How can I avoid rendering my child component?

CodePudding user response：

Re-rendering occurs only when the state updates. So you can use a variable instead of a state for 'first.'

let first;
const handleCick = () => {
    first = {id: 123}
}