Q:

React hook how to avoid executing child components when parent rerenders

Given the following are all written in react hooks:
export Parent = () => {
    const [msgValue, setMsgValue] = useState();
    ....

    return {
        <>
            ...
            <Child setMsgValue={setMsgValue}/>
            ...
        </>
    }
}

shouldSkipUpdate = (oldProps, newProps) => {
    ...
    return true;
}

export Child = React.memo({setMsgValue} => {
    return (
        <>
            <HeavyComponent1>
            <HeavyComponent2>
            <InputBox onChange={setMsgValue}>
        </>
    )
}, shouldSkipUpdate);

My problem is that the input box is not responsive, my investigation shows that every keydown, <Child> will get executed once, even shouldSkipUpdate returns true, which in turn causes <HeavyComponent1> and <HeavyComponent2> code get executed and causes lagging.
What have I done wrong and how do I actually prevent <HeavyComponent> gets executed?
I am also a bit confused about re-render vs the component code gets executed, would be great to get clarification on this as well.

A:

Please check below codesanbox, i have a child component which does not get rendered even if parent component gets rendered. Hope tha gives you some clarity on what needs to be done.
https://codesandbox.io/s/friendly-cerf-qme94

