diff --git a/snippets/useDefault.md b/snippets/useDefault.md new file mode 100644 index 000000000..35db2a25e --- /dev/null +++ b/snippets/useDefault.md @@ -0,0 +1,35 @@ +--- +title: useDefault +tags: hooks,state,intermediate +firstSeen: 2021-10-23T05:00:00-04:00 +--- + +Creates a stateful value with a default fallback if it's `null` or `undefined`, and a function to update it. + +- Use the `useState()` hook to create stateful value. +- Check if the value is either `null` or `undefined`. +- Return the `defaultState` if it is, otherwise return the actual `value` state, alongside the `setValue` function. + +```jsx +const useDefault = (defaultState, initialState) => { + const [value, setValue] = React.useState(initialState); + const isValueEmpty = value === undefined || value === null; + return [isValueEmpty ? defaultState : value, setValue]; +}; +``` + +```jsx +const UserCard = () => { + const [user, setUser] = useDefault({ name: 'Adam' }, { name: 'John' }); + + return ( + <> +
User: {user.name}
+ setUser({ name: e.target.value })} /> + + + ); +}; + +ReactDOM.render(, document.getElementById('root')); +```