generated from mateusfg7/nextjs-setup
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
chore(content/post): add "why-use-functional-setstate"
Showing
3 changed files
with
117 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions
117
content/posts/why-use-functional-setstate/why-use-functional-setstate.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
--- | ||
title: 'Why use functional `setState`' | ||
date: '2024-01-24T12:34:39.886Z' | ||
description: 'Advantage of function on `setState` over variable' | ||
category: 'Article' | ||
tags: 'react,usestate,hook,states,lifecycle,programming,code,pattern' | ||
author: 'mateusfg7' | ||
status: 'published' | ||
--- | ||
|
||
!> This post is a resume of post [Choosing the Right State Update Method Normal vs. Functional State Updates in React](https://www.linkedin.com/pulse/choosing-right-state-update-method-normal-vs-updates-react-verma-/), by [Apoorve Verma](https://www.linkedin.com/in/apoorveverma/?lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3BudVa6%2FuETiu9EDMDaWJFkA%3D%3D). | ||
|
||
|
||
# Diferences between `setState` methods | ||
|
||
Before all, let's see the difference between the state update methods treated here. | ||
|
||
## Normal States Updates | ||
|
||
```tsx | ||
import React, { useState } from 'react' | ||
|
||
const Counter = () => { | ||
const [count, setCount] = useState(0); | ||
|
||
const increment = () => { | ||
setCount(count + 1); | ||
}; | ||
|
||
return ( | ||
<div> | ||
<p>Count: {count}</p> | ||
<button onClick={increment}>Increment</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Counter; | ||
``` | ||
|
||
## Functional State Updates | ||
|
||
```tsx | ||
import React, { useState } from 'react' | ||
|
||
const Counter = () => { | ||
const [count, setCount] = useState(0); | ||
|
||
const increment = () => { | ||
setCount((prevCount) => prevCount + 1); | ||
}; | ||
|
||
return ( | ||
<div> | ||
<p>Count: {count}</p> | ||
<button onClick={increment}>Increment</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Counter; | ||
``` | ||
|
||
# When use functional state updates | ||
|
||
The need for **functional state updates** arises from the **problem of stale state** and ensuring accurate state transitions. In **normal state updates**, subsequent state updates are based on the previous state value. However, when dealing with asynchronous updates or multiple state updates within a single function or event handler, the current state may not be up to date. This can lead to inconsistencies and unexpected behavior in your application. | ||
|
||
## Problem | ||
|
||
I.e., suppose you have a component that increments the count by 10 three times when a button is clicked: | ||
|
||
```tsx | ||
import React, { useState } from 'react' | ||
|
||
const Counter = () => { | ||
const [count, setCount] = useState(0); | ||
|
||
const increment = () => { | ||
setCount(count + 10); | ||
setCount(count + 10); | ||
setCount(count + 10); | ||
}; | ||
|
||
return ( | ||
<div> | ||
<p>Count: {count}</p> | ||
<button onClick={increment}>Increment</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Counter; | ||
``` | ||
|
||
In this case, you might expect the count to increase by 30 after three button clicks. However, due to the nature of normal state updates, the value of count will only increase by 10, as each setCount call operates on the stale value of count. | ||
|
||
 | ||
|
||
## Solution | ||
|
||
Functional state updates solve this problem by **providing the previous state value** as an argument within the updater function. | ||
To fix the example above using functional state updates, you can modify the increment function as follows: | ||
|
||
```tsx | ||
const increment = () => | ||
setCount((prevCount) => prevCount + 10); | ||
setCount((prevCount) => prevCount + 10); | ||
setCount((prevCount) => prevCount + 10); | ||
}; | ||
``` | ||
|
||
 | ||
|
||
|
||
# Referencies | ||
|
||
Updating state based on the previous state (**oficial React docs**): _https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state_ |