title | type | language | tags | cover | dateModified | |||
---|---|---|---|---|---|---|---|---|
React useError hook |
snippet |
react |
|
cloudy-mountaintop |
2021-09-30 |
Creates an error dispatcher.
- Use the
useState()
hook to create a state variable that holds the error. - Use the
useEffect()
hook tothrow
the error whenever it's truthy. - Use the
useCallback()
hook to update the state and return the cached function.
const useError = err => {
const [error, setError] = React.useState(err);
React.useEffect(() => {
if (error) throw error;
}, [error]);
const dispatchError = React.useCallback(err => {
setError(err);
}, []);
return dispatchError;
};
const ErrorButton = () => {
const dispatchError = useError();
const clickHandler = () => {
dispatchError(new Error('Error!'));
};
return <button onClick={clickHandler}>Throw error</button>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<ErrorButton />
);