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 toinitialState
. - 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.