Merging Update Objects with â€¦

Unlike the setState method in class components, useState does not automatically merge update objects. To do this you can combine the function updater form with the object spread syntax:

const [state, setState] = React.useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

const [state, setState] = React.useState({});
setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

You may provide a function to compute the initial value of the state.

const [state, setState] = React.useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

const [state, setState] = React.useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

MENU

Merging Update Objects with â€¦