CODEWITHSUNDEEP
javascriptreactjsreact-hooksupdatessetstate
Chong Lip Phang
Chong Lip Phang

Reputation: 9279

When to use functional update form of useState() hook, eg. setX(x=>x+1)

Normally when we need to update a state in a functional component, we do something like this:

function Example() {
    const [count, setCount] = React.useState(0);
    return (<div><p>You clicked {count} times</p>
                 <button onClick={() => setCount(count + 1)}>
                    Click me
                 </button>
            </div>);
}

When and why will we ever need to use the functional update form?

function Example() {
    const [count, setCount] = React.useState(0);
    return (<div><p>You clicked {count} times</p>
                 <button onClick={() => setCount(c=>c + 1)}>
                    Click me
                 </button>
            </div>);
}

Upvotes: 3

Views: 2574

Answers (6)

Chong Lip Phang
Chong Lip Phang

Reputation: 9279

The functional update form also allows the update function to be passed to its children while still having access to the parent’s state.

function MyButton(props){
     // return <button onClick={()=>props.onClick(count+1)}>+1</button>;  // error as count is not exposed here
     return <button onClick={()=>props.onClick(n=>(n+1))}>+1</button>;
}
function Example() {
   const [count, setCount] = React.useState(0);
   return (<div><p>Counter: {count}</p>
                <MyButton onClick={setCount}/>
           </div>);
}
ReactDOM.render(<Example/>,document.querySelector("div"));

Upvotes: 1

glinda93
glinda93

Reputation: 8459

There are other use cases too. For example, when you call useState inside an effect. If new state is dependent on old state, this might cause an infinite loop.

useEffect(() => {
  setCounter(counter + 1);
}, [counter]);

You can avoid this by using functional updates:

useEffect(() => {
  setCounter(old => old + 1);
}, []);

Upvotes: 1

Viet
Viet

Reputation: 12787

You can see the different when call set state twice:

<button
  onClick={() => {
    setCount(count + 1);
    setCount(count + 1);
  }}
></button>;

<button
  onClick={() => {
    setCount(c => (c + 1));
    setCount(c => (c + 1));
  }}
></button>;

Upvotes: 1

Phạm Huy Ph&#225;t
Phạm Huy Ph&#225;t

Reputation: 1086

According to this: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

The the functional update form make sure that the previous state that you take reference from is the latest / finalized version when there might be multiple setState hook (which is asynchronous) called (for example, if the user spam click on the button)

And also due to its async nature, the state will not be updated right away within a function, for e.g:

func() {
 console.log(counter) // counter = 1
 setCounter(counter => counter + 1) // counter = 1
 console.log(counter) // counter = 1
}

Upvotes: 0

banyudu
banyudu

Reputation: 1092

State Updates May Be Asynchronous:

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

useState is the same as setState in this condition.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370779

Use the function form when the setter may close over an old state value.

For example, if an async request is initiated, and you want to update state after that's done, the request that was made will have scope of the state as it was at the beginning of the request, which may not be the same as the most up-to-date render state.

You may also need to use the function form if the same state value was just updated, eg

setValue(value + 1);
// complicated logic here
if (someCondition) {
  setValue(value => value + 1);
}

because the second call of setValue closes over an old value.

Upvotes: 4

Related Questions