useDefault

React, Hooks, State

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.
const useDefault = (defaultState, initialState) => {
  const [value, setValue] = React.useState(initialState);
  const isValueEmpty = value === undefined || value === null;
  return [isValueEmpty ? defaultState : value, setValue];
};
const UserCard = () => {
  const [user, setUser] = useDefault({ name: 'Adam' }, { name: 'John' });

  return (
    <>
      <div>User: {user.name}</div>
      <input onChange={e => setUser({ name: e.target.value })} />
      <button onClick={() => setUser(null)}>Clear</button>
    </>
  );
};

ReactDOM.render(<UserCard />, document.getElementById('root'));

Recommended snippets

  • useLocalStorage

    React, Hooks

    Creates a stateful value that is persisted to localStorage, and a function to update it.

  • useSessionStorage

    React, Hooks

    Creates a stateful value that is persisted to sessionStorage, and a function to update it.

  • useMergeState

    React, Hooks

    Creates a stateful value, and a function to update it by merging the new state provided.