Menu

gitpiper

useMergeState react Code Snippet in 2022

hooksstatebeginner

Last Updated: 26 November 2022

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'));

react snippet similar to useMergeState For You in November 2022

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2022 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️