<div class="hn-table">
<table>
<thead>
<tr>
<td>Scenario</td><td>useState</td><td>useReducer</td></tr>
</thead>
<tbody>
<tr>
<td>Type of state?</td><td>string, boolean, number</td><td>array, object</td></tr>
<tr>
<td>Number of state?</td><td>1 or 2</td><td>Many</td></tr>
<tr>
<td>Related state?</td><td>No</td><td>Yes</td></tr>
<tr>
<td>Business logic?</td><td>Simple</td><td>Complex</td></tr>
<tr>
<td>Local vs Global?</td><td>Local</td><td>Global</td></tr>
</tbody>
</table>
</div>



| Scenario               | useState                              | useReducer    |
|-------------------|-------------------------     |---------------|
| Type of state?      | string, boolean, number     | array, object   |
| Number of state? | 1 or 2                                   | Many               |
| Related state?      | No                                        | Yes                  |
| Business logic?    | Simple                                  | Complex         |
| Local vs Global?   | Local                                    | Global             |

Cả hai hook này đều làm nhiệm vụ quản lí state, cùng tìm hiểu khi nào thì nên dùng hook tương ứng để đạt hiệu quả cao.

React hook - useReducer vs useState

Mình mới ba mấy tuổi thôi mà đứng dậy nhanh quá đã hơi chóng mặt 🤪🤪🤪


KenTrung VN

KenTrung VN

React hook - useReducer vs useState

Cả hai hook này đều làm nhiệm vụ quản lí state, cùng tìm hiểu khi nào thì nên dùng hook tương ứng để đạt hiệu quả cao.

Scenario	useState	useReducer
Type of state?	string, boolean, number	array, object
Number of state?	1 or 2	Many
Related state?	No	Yes
Business logic?	Simple	Complex
Local vs Global?	Local	Global