React useMergeState hook

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.createRoot(document.getElementById('root')).render(
  <MyApp />
);

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub.

More like this

  • React useLocalStorage hook

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

    React, Hooks · Sep 13, 2021

  • React useSessionStorage hook

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

    React, Hooks · Sep 15, 2021

  • React useDefault hook

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

    React, Hooks · Oct 23, 2021