How can we get rid of the unnecessary renders on Child components when we pass in a function as a prop? — Let’s start with a simple example. We normally do this to handle an event. const Parent = ()=> {
const [someVal, setSomeVal] = useState(null);
const eventHandler = ()=> {
handleTheOnClick(someVal);
}
return <Child onClick={eventHandler}/>
} Say the <Child> is a pureComponent and it will re-render itself only when one of…
