Add useError hook
This commit is contained in:
41
snippets/useError.md
Normal file
41
snippets/useError.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: useError
|
||||
tags: hooks,state,effect,intermediate
|
||||
firstSeen: 2021-09-30T05:00:00-04:00
|
||||
---
|
||||
|
||||
Creates an error dispatcher.
|
||||
|
||||
- Use the `useState()` hook to create a state variable that holds the error.
|
||||
- Use the `useEffect()` hook to `throw` the error whenever it's truthy.
|
||||
- Use the `useCallback()` hook to update the state and return the cached function.
|
||||
|
||||
```jsx
|
||||
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;
|
||||
};
|
||||
```
|
||||
|
||||
```jsx
|
||||
Rconst ErrorButton = () => {
|
||||
const dispatchError = useError();
|
||||
|
||||
const clickHandler = () => {
|
||||
dispatchError(new Error('Error!'));
|
||||
};
|
||||
|
||||
return <button onClick={clickHandler}>Throw error</button>;
|
||||
};
|
||||
|
||||
ReactDOM.render(<ErrorButton />, document.getElementById('root'));
|
||||
```
|
||||
Reference in New Issue
Block a user