rendering of the child component

Question

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?

If you don't want it to re-render, why did you send it to the child component as a prop? — technophyle, Jan 13 '23 at 07:26
A `state` is meant to rerender your components. If you don't want to rerender, use a `variable` instead — MaatMa, Jan 13 '23 at 07:26

score 0 · Accepted Answer · answered Jan 13 '23 at 07:20

0

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}
}

answered Jan 13 '23 at 07:20

Shakya Peiris

1 Answers1