Khám Phá Sức Mạnh của useState và Những Lựa Chọn Thay Thế Hữu Ích Trong React
Khi bạn mới bắt đầu tìm hiểu về React, hook useState có thể được xem như một "cây đũa thần" trong việc quản lý trạng thái, giúp cho mọi thứ hoạt động một cách trơn tru. Bạn có thể dễ dàng theo dõi số lần nhấp chuột trên một nút hay chuyển đổi trạng thái của một modal chỉ bằng cách sử dụng useState. Tuy nhiên, khi bạn ngày càng khám phá sâu hơn vào thế giới phát triển ứng dụng với React, có thể bạn sẽ tự hỏi: Liệu useState có thực sự là lựa chọn tối ưu cho mọi tình hình không?
Câu trả lời là: không hẳn. Mặc dù useState là một công cụ đa năng, nhưng React cũng cung cấp nhiều hook và mô hình khác có thể phù hợp hơn tùy thuộc vào từng nhu cầu cụ thể. Trong bài viết này, chúng ta sẽ cùng khám phá những lựa chọn thay thế như useRef, useReducer và useContext để tìm ra khi nào những công cụ này thực sự hữu ích.
useRef: Giải Pháp Không Kích Hoạt Re-render
Một trong những sai lầm phổ biến của lập trình viên mới khi sử dụng React là áp dụng useState vào những giá trị không cần thiết để tái kết xuất giao diện. Trong những trường hợp cần duy trì dữ liệu qua nhiều lần re-render mà không làm phát động lại giao diện, hook useRef sẽ là một lựa chọn tối ưu.
Ví dụ thực tế:
Hãy tưởng tượng rằng bạn đang phát triển một component theo dõi số lần nhấp chuột trên một nút mà không cần phải re-render mỗi khi số liệu này thay đổi.
javascript
function ClickTracker() {
const clickCount = useRef(0);
const handleClick = () => {
clickCount.current += 1;
console.log(`Nút đã được nhấp ${clickCount.current} lần`);
};
return <button onClick={handleClick}>Nhấp vào tôi</button>;
}Trong ví dụ này, useRef giúp lưu giữ số lần nhấp mà không tạo ra những lần re-render không cần thiết. Nếu bạn sử dụng useState tại đây, component sẽ tái kết xuất mỗi khi nút được nhấp, điều này không cần thiết trong trường hợp này.
Khi nào nên dùng useRef:
- Theo dõi các giá trị không cần kích hoạt cập nhật giao diện.
- Lưu trữ tham chiếu đến các phần tử DOM hoặc những giá trị trạng thái trước đó.
useReducer: Giải Quyết Logic Trạng Thái Phức Tạp
Khi bạn đối mặt với logic trạng thái phức tạp hơn, đặc biệt là khi cần quản lý nhiều giá trị con hay hành động, useReducer chính là giải pháp mạnh mẽ hơn. Việc sử dụng useState để quản lý nhiều trạng thái có thể trở nên rắc rối và không hiệu quả.
Tình huống thực tế:
Giả sử bạn đang xây dựng một biểu mẫu nơi bạn quản lý nhiều input như tên, email và mật khẩu. Dùng useState cho mỗi input sẽ gây ra sự lộn xộn.
javascript
function formReducer(state, action) {
switch (action.type) {
case 'SET_NAME':
return { ...state, name: action.payload };
case 'SET_EMAIL':
return { ...state, email: action.payload };
case 'SET_PASSWORD':
return { ...state, password: action.payload };
default:
return state;
}
}
function SignupForm() {
const [formState, dispatch] = useReducer(formReducer, {
name: '',
email: '',
password: ''
});
return (
<>
<input
value={formState.name}
onChange={(e) => dispatch({ type: 'SET_NAME', payload: e.target.value })}
placeholder="Tên"
/>
<input
value={formState.email}
onChange={(e) => dispatch({ type: 'SET_EMAIL', payload: e.target.value })}
placeholder="Email"
/>
<input
value={formState.password}
onChange={(e) => dispatch({ type: 'SET_PASSWORD', payload: e.target.value })}
placeholder="Mật khẩu"
/>
</>
);
}Tại đây, useReducer giúp tập trung tất cả các cập nhật trạng thái vào một hàm duy nhất, giúp việc quản lý trở nên dễ dàng hơn so với việc sử dụng nhiều lời gọi đến useState.
Khi nào nên dùng useReducer:
- Xử lý logic trạng thái phức tạp bao gồm nhiều giá trị và hành động.
- Khi các thay đổi trạng thái dẫn đến các hành động rõ ràng (ví dụ: THIẾT LẬP, THÊM, XÓA).
useContext: Chia Sẻ Trạng Thái Giữa Các Component Dễ Dàng
Nếu bạn cần chia sẻ trạng thái giữa nhiều component, việc truyền props xuống quá nhiều cấp có thể trở thành một cơn ác mộng. Đây chính là lúc useContext phát huy tác dụng — giúp bạn chia sẻ trạng thái mà không cần phải chuyển props một cách phức tạp.
Ví dụ về useContext:
Hãy tưởng tượng bạn đang xây dựng một giỏ hàng trong ứng dụng của mình. Để quản lý các mặt hàng đã thêm và tổng giá, bạn cần chắc chắn rằng trạng thái này có thể được truy cập từ nhiều phần khác nhau của ứng dụng.
javascript
const CartContext = React.createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
return (
<CartContext.Provider value={{ cart, setCart }}>
{children}
</CartContext.Provider>
);
}
function Header() {
const { cart } = React.useContext(CartContext);
return <div>Số mặt hàng trong giỏ: {cart.length}</div>;
}
function App() {
return (
<CartProvider>
<Header />
{/* Các component khác */}
</CartProvider>
);
}Ở đây, useContext cho phép trạng thái giỏ hàng có sẵn cho bất kỳ component nào cần mà không phải mất công truyền props một cách thủ công.
Khi nào nên dùng useContext:
- Chia sẻ trạng thái giữa các component lồng sâu.
- Tránh việc truyền props cho dữ liệu được sử dụng phổ biến (như xác thực người dùng hay chủ đề).
Sự Lựa Chọn Phù Hợp
Mặc dù useState là một lựa chọn tuyệt vời cho người mới bắt đầu, nhưng hệ sinh thái của React còn rất nhiều công cụ mạnh mẽ khác như useRef, useReducer và useContext có thể giúp đơn giản hóa mã của bạn và cải thiện hiệu suất tổng thể của ứng dụng.
Thay vì luôn mặc định sử dụng useState, hãy dành thời gian tự hỏi một vài câu hỏi chính:
- Liệu trạng thái này có thực sự cần kích hoạt kết xuất lại không? (Nếu không, hãy cân nhắc đến
useRef) - Logic trạng thái của tôi có trở nên quá phức tạp với
useStatekhông? (Bạn có thể thử vớiuseReducer) - Có phải tôi đang truyền props qua quá nhiều cấp không? (Xem xét
useContext)
Bằng cách lựa chọn công cụ phù hợp cho từng nhiệm vụ, bạn sẽ có thể viết được các thành phần React không chỉ hiệu quả hơn mà còn dễ bảo trì hơn và dễ hiểu hơn.
Vì vậy, lần sau khi bạn thấy mình nghiễm nhiên sử dụng useState, hãy dừng lại và suy nghĩ. Có thể sẽ có một cách tốt hơn để xử lý vấn đề mà bạn đang gặp phải!
source: viblo
