82

I really like the new React hooks and I'm using them frequently for a project I'm working on. I'm coming across a situation where I want to use the prevState in the useState hook, but I'm not really certain on how to do this.

I've tried something like this, but it fails to compile.

const [ someState, setSomeState ] = useState( new Map() )
setSomeState( prevState.someState.set( key, value ) )

(by the way, this is to map an array of checkboxes to keep track of the ones that are check marked)

I'm trying to follow this example here, but without using the setState function.

Thanks for the help!

falinsky
  • 7,229
  • 3
  • 32
  • 56
Student22
  • 1,979
  • 5
  • 22
  • 33

7 Answers7

150

For objects you can use the spread operator to use prevState within your setState call.

const [object, setObject] = useState({
  firstKey: '',
  secondKey: '',
});

setObject((prevState) => ({
  ...prevState,
  secondKey: 'value',
}));

// object = {
//   firstKey: '',
//   secondKey: 'value',
// }

The snippet below show an example of using prevState for setting the state of an object.

const {useState} = React;

const Example = ({title}) => {
  const initialState = {
    firstKey: 'empty',
    secondKey: 'empty',
    thirdKey: 'not empty',
  }
  const [object, setObject] = useState(initialState);
  
  const withPrevState = () => {
    setObject((prevState) => ({
      ...prevState,
      secondKey: 'not empty',
    }));
  }

  return (
    <div>
      <h5>Updates Second key to 'not empty'</h5>
      <p>First key: {object.firstKey}</p>
      <p>Second key: {object.secondKey}</p>
      <p>Third key: {object.thirdKey}</p>
      <button onClick={withPrevState}>
        Update with prevState
      </button>
      <button onClick={() => {setObject({secondKey: 'not empty'})}}>
        Update without prevState
      </button>
      <button onClick={() => {setObject(initialState)}}>
        Reset
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
ppak10
  • 2,103
  • 3
  • 13
  • 24
  • 9
    I finally understood how to use this prevstate with this snippet. Thanks – Luis Febro Oct 18 '19 at 00:22
  • I believe this decreases performance because React thinks all state entries were set to something new. Additionally, you are cloning an array, which also can cause a dramatic decrease in performance for states with many entries. – Marten Nov 21 '21 at 15:51
26

In order to use Maps, you'll need to clone it before manipulating the values. Otherwise, it's mutating the original Map and React doesn't handle mutatable state.

const handleChange = useCallback(({ target: { name, checked } }) => {
  setCheckbox(prevState => {
    return new Map(prevState).set(name, checked);
  });
}, []);

Updated Working Example:

Edit Multi Checkbox Handler

Matt Carlotta
  • 18,972
  • 4
  • 39
  • 51
  • Updated answer to include a working `Map` example. While this works, it may be less performant than other alternatives (especially if the `Map` becomes large). – Matt Carlotta May 24 '19 at 20:32
17

state updater from useState provides a callback pattern which returns you the previous state which you can use to update the current state

const [ someState, setSomeState ] = useState( new Map() )
setSomeState(prevState => prevState.set( key, value ) )
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • Hey I've tried this and I'm getting this error `Cannot read property 'set' of undefined`. Is the `useState` hook limited? – Student22 Apr 24 '19 at 06:09
  • you might be using `prevState.someState.set( key, value ) ` instead of `prevState.set( key, value ) ` – Shubham Khatri Apr 24 '19 at 06:16
  • 1
    Reference for the state updater: https://reactjs.org/docs/hooks-reference.html#usestate – mojave Sep 07 '20 at 18:11
  • Just to confirm: why using the state from the callback and not `someState`? To avoid messy concurrent updates? I just see this often but never the technical explanation that comes along. – Eric Burel Jun 30 '21 at 12:40
  • 1
    @EricBurel you don't always need to use functional setState but sometimes it can be really useful. [This post](https://stackoverflow.com/questions/48209452/when-to-use-functional-setstate/48209870#48209870) explains it a some detail for class component but the same applied to functional components too. In additional functional state updates with hooks can be really useful to avoid closure issues as well since you are guaranteed to be provided the latest state – Shubham Khatri Jun 30 '21 at 13:23
8

You have already the previous state in the destructed variable: someState

so you can do:

const [ someState, setSomeState ] = useState( new Map() )
setSomeState( someState.set( key, value ) )
Giorgio Provenzale
  • 600
  • 1
  • 5
  • 9
6

use this

const [someState, setSomeState] = useState({thing: 'loading', count: 1});
setSomeState(prev => ({...prev, count: prev.count + 1}));
Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
Hossein Hajizadeh
  • 1,357
  • 19
  • 10
3

If you want to update a single value using prevState and useState - You can simply follow this

const [count, setCount] = useState(0) 
 
if(your-condition) {
  setCount((prevState) => prevState + 1)
}
Shreyas Kumar
  • 51
  • 4
0
  const [object,setObject] = useState({firstPropertie:'first',
    secondPropertie:'second'})

  setObject(prevState =>
  return{...prevState,secondPropertie:'newValue'})
Apostolos
  • 10,033
  • 5
  • 24
  • 39
Mahmood Masoud
  • 11
  • 3