React useMergeState hook
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.render(<MyApp />, document.getElementById('root'));