- vừa được xem lúc

Lấy giá trị state trước đó trong React như thế nào cho đúng và tránh lỗi

0 0 4

Người đăng: Thanh Hung

Theo Viblo Asia

Trong React, state là bất đồng bộ (asynchronous). Điều này có nghĩa là bạn không nên dựa vào giá trị hiện tại của state nếu bạn muốn cập nhật nó dựa trên giá trị trước đó.

❎️ Sai lầm phổ biến

const [count, setCount] = useState(0); const increase = () => { setCount(count + 1);
};

Vấn đề: Nếu có nhiều lần increase được gọi liên tiếp (vd: trong loop, event nhanh), count có thể không được cập nhật đúng vì các lần gọi setCount đều dùng cùng một giá trị count.

✅ Cách đúng: Dùng callback của setState

setCount(prevCount => prevCount + 1);

React sẽ đảm bảo prevCount luôn là giá trị mới nhất, bất kể bạn gọi bao nhiêu lần liên tiếp.

Ví dụ đầy đủ: Counter đơn giản

import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const increase = () => { setCount(prev => prev + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increase}>+</button> </div> );
}

Mỗi lần nhấn nút, setCount dùng giá trị trước đó → luôn chính xác.

Khi nào phải dùng giá trị trước đó?

Tình huống Lý do nên dùng prev => ...
Cập nhật giá trị dạng số Tránh mất đồng bộ khi có nhiều setState liên tiếp
Toggling boolean setShow(prev => !prev) thay vì setShow(!show)
Thêm item vào mảng setList(prev => [...prev, newItem])
Xoá item khỏi mảng setList(prev => prev.filter(...))
Phụ thuộc vào nhiều state Tách logic ra để tránh dùng giá trị sai

Tăng liên tục nhiều lần

const increaseBy3 = () => { setCount(prev => prev + 1); setCount(prev => prev + 1); setCount(prev => prev + 1);
};

👉 Nếu bạn dùng setCount(count + 1) ba lần, count chỉ tăng 1.

👉 Nhưng với prev => prev + 1, count sẽ tăng 3, vì mỗi lần đều dùng giá trị mới nhất.

Ngoài ra: Lưu giá trị state cũ (nếu cần so sánh)

Dùng useRef để lưu lại giá trị trước đó (khác với cách trên – dùng để cập nhật):

import { useEffect, useRef } from "react"; const prevCountRef = useRef(); useEffect(() => { prevCountRef.current = count;
}); const prevCount = prevCountRef.current;

👉 Dùng khi bạn muốn so sánh state hiện tại với state trước đó (ví dụ để trigger animation, logs, v.v.).

🔚 Tổng kết

Trong React, việc cập nhật state thường dựa trên giá trị trước đó, và nếu không làm đúng cách, bạn rất dễ gặp lỗi do state được cập nhật bất đồng bộ. Cách an toàn và đúng chuẩn để lấy giá trị state trước đó là sử dụng hàm callback trong setState, ví dụ: setCount(prev => prev + 1). Cách này đảm bảo bạn luôn làm việc với giá trị mới nhất, tránh sai sót khi gọi setState nhiều lần liên tiếp hoặc trong các hàm xử lý phức tạp. Ngoài ra, nếu bạn cần so sánh giá trị state hiện tại với giá trị trước đó, hãy dùng useRef để lưu lại state cũ. Tóm lại, hãy luôn dùng prevState khi cập nhật state phụ thuộc vào chính nó, và sử dụng useRef khi cần theo dõi giá trị cũ cho mục đích so sánh hoặc xử lý phụ. Việc hiểu rõ hai kỹ thuật này sẽ giúp bạn viết code React chính xác, ổn định và dễ bảo trì hơn.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Những điều cần lưu ý và sử dụng Hook trong React (Phần 5)

V. Sử dụng useRef như thế nào cho đúng.

0 0 144

- vừa được xem lúc

7 Cách viết code React "clean" hơn

Mở đầu. Là nhà phát triển React, tất cả chúng ta đều muốn viết code sạch hơn, đơn giản hơn và dễ đọc hơn. 1. Sử dụng JSX shorthands.

0 0 203

- vừa được xem lúc

Create app covid-19 use Reactjs

Chào các bạn hôm nay mình sẽ chia sẻ với các bạn một app covid-19, để mọi người cùng tham khảo, tính năng của App này chỉ đơn giản là show số liệu về dịch Covid của các nước trên thế giới như: Số ngườ

0 0 58

- vừa được xem lúc

ReactJS Custom Hooks

ReactJS cung cấp rất nhiều cho bạn các hook mà bạn có thể sử dụng hằng ngày vào project của mình. Nhưng bên cạnh đó bạn có thể tự tạo ra các hook của riêng bạn để sử dụng, làm cho việc tối ưu hóa code

0 0 82

- vừa được xem lúc

3 cách để tránh re-render khi dùng React context

3 cách để tránh re-render khi dùng React context. Nếu đã từng sử dụng React context cho dự án của bạn, và gặp phải tình trạng các component con - Consumer re-render rất nhiều lần, thậm chí bị sai logi

0 0 40

- vừa được xem lúc

Tìm hiểu về React Hook: Sử dụng useDebugValue

Trong bài viết hôm này, tôi sẽ giới thiệu các bạn một React Hook tiếp theo, đó là useDebugValue. useDebugValue là gì .

0 0 60