Crazy light on content for this one... I mean there's a lot of words and description, but the little example doesn't lead anyone down a path of being able to use the feature at all.
NOTE: You can *NOT* rely on this method to complete before the tab/window closes. It may or may not work depending on latency to the server, or the time it takes to fulfill the request etc.
Make other efforts using localstorage and a worker, if you want to avoid this failing to finish.
Decent example of leveraging event bubbling for form validation over specific input listeners. Would probably listen at the specific form level though, rather than the document level as a whole... but nice to see.
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.