React useMergeState hook

Angelos Chalaris · React, Hooks, State · Sep 23, 2021

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

  • Use the useState() hook to create a state variable, initializing it to initialState.
  • Create a function that will update the state variable by merging the new state provided with the existing one. If the new state is a function, call it with the previous state as the argument and use the result.
  • Omit the argument, to initialize the state variable with an empty object ({}).
const useMergeState = (initialState = {}) => {
  const [value, setValue] = React.useState(initialState);

  const mergeState = newState => {
    if (typeof newState === 'function') newState = newState(value);
    setValue({ ...value, ...newState });
  };

  return [value, mergeState];
};
const MyApp = () => {
  const [data, setData] = useMergeState({ name: 'John', age: 20 });

  return (
    <>
      <input
        value={data.name}
        onChange={e => setData({ name: e.target.value })}
      />
      <button onClick={() => setData(({ age }) => ({ age: age - 1 }))}>
        -
      </button>
      {data.age}
      <button onClick={() => setData(({ age }) => ({ age: age + 1 }))}>
        +
      </button>
    </>
  );
};

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

Would you like to help us improve 30 seconds of code?Take a quick survey

Recommended snippets

  • React useLocalStorage hook

    React, Hooks

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

  • React useSessionStorage hook

    React, Hooks

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

  • React useDefault hook

    React, Hooks

    Creates a stateful value with a default fallback if it's null or undefined, and a function to update it.