Here's the real issue, that isn't covered...
const MyButton = React.memo(({onClick, text}) => (
<button onClick={onClick}>text</button>
));
const Parent = () => {
const handleClick = (event) => {...};
return <MyButton
onClick={handleClick}
text="click me"
/>;
}
Every render of the Parent, will re-render MyButton... why, because the handleClick method is re-created every time and won't match.
This is why you want an event handler outside your component context in a state machine that has its own context higher in the stack. Redux does this well, but there are other options.
Here's the real issue, that isn't covered... const MyButton = React.memo(({onClick, text}) => ( <button onClick={onClick}>text</button> )); const Parent = () => { const handleClick = (event) => {...}; return <MyButton onClick={handleClick} text="click me" />; } Every render of the Parent, will re-render MyButton... why, because the handleClick method is re-created every time and won't match. This is why you want an event handler outside your component context in a state machine that has its own context higher in the stack. Redux does this well, but there are other options.