Nếu props là dữ liệu truyền từ bên ngoài vào component, thì state là dữ liệu component cần ghi nhớ trong quá trình người dùng tương tác. State là lý do UI có thể thay đổi khi bạn bấm nút, nhập text, kéo danh sách hoặc nhận dữ liệu mới từ API.
Điểm cần nhớ: state không phải là biến bình thường. Khi state thay đổi, React sẽ render lại component để UI phản ánh dữ liệu mới.
State là gì?
State là “bộ nhớ” của component. Ví dụ một màn hình có nút tăng số, ô nhập tên, trạng thái loading hoặc danh sách bài viết sau khi gọi API. Những dữ liệu này thay đổi theo thời gian, nên chúng thường nằm trong state.
import { Button, Text, View } from 'react-native';
import { useState } from 'react';
export default function CounterScreen() {
const [count, setCount] = useState(0);
return (
<View>
<Text>Bạn đã bấm {count} lần</Text>
<Button title="Tăng" onPress={() => setCount(count + 1)} />
</View>
);
}count là giá trị hiện tại. setCount là hàm dùng để cập nhật giá trị. Mỗi lần gọi setCount, component sẽ render lại với giá trị mới.
Khi nào dùng state?
Hãy dùng state khi dữ liệu có thể thay đổi và sự thay đổi đó cần hiển thị lên UI. Ví dụ: người dùng đang bật/tắt dark mode, text đang nhập trong form, tab đang được chọn, dữ liệu đang loading, lỗi khi gọi API thất bại.
Ngược lại, nếu dữ liệu không thay đổi hoặc có thể tính trực tiếp từ props, bạn không nhất thiết phải đưa nó vào state. Càng ít state không cần thiết, component càng dễ hiểu.
State khác props thế nào?
Props được truyền từ component cha xuống component con. State thường được quản lý bên trong component hoặc ở một component cha gần nhất cần dùng dữ liệu đó.
Một ví dụ dễ nhớ: ArticleCard nhận title qua props vì title đến từ dữ liệu bài viết. Nhưng trạng thái “đang mở rộng mô tả hay chưa” có thể là state của chính card nếu chỉ card đó cần biết.
Đừng sửa state trực tiếp
Người mới rất hay mắc lỗi sửa trực tiếp object hoặc array trong state. React cần bạn tạo giá trị mới rồi gọi hàm set state.
// Không nên
user.name = 'Nam';
setUser(user);
// Nên
setUser({
...user,
name: 'Nam',
});Với array cũng vậy. Thay vì push trực tiếp vào array cũ, hãy tạo array mới.
setArticles([...articles, newArticle]);State là một snapshot
Một điều hơi lạ lúc mới học: state trong mỗi lần render giống như một ảnh chụp tại thời điểm đó. Nếu bạn gọi setCount(count + 1) nhiều lần liên tiếp trong cùng một handler, giá trị count có thể vẫn là giá trị của lần render hiện tại.
Khi cần cập nhật dựa trên giá trị trước đó, hãy dùng dạng function.
setCount(previousCount => previousCount + 1);Lỗi thường gặp
Lỗi đầu tiên là dùng state cho mọi thứ, kể cả dữ liệu có thể tính được. Lỗi thứ hai là sửa trực tiếp object/array. Lỗi thứ ba là đặt state ở quá sâu khiến component khác cần dùng nhưng không truy cập được. Khi nhiều component cần cùng một dữ liệu, hãy cân nhắc đưa state lên component cha chung.
Kết luận
State là khái niệm giúp React Native tạo ra UI tương tác. Hãy nhớ công thức đơn giản: dữ liệu thay đổi + cần hiển thị lên UI = ứng viên tốt cho state. Khi hiểu state, bạn sẽ bắt đầu thấy React Native vận hành rất logic.
Nguồn tham khảo: React: State as a Component’s Memory, React: State as a Snapshot.
