Khi React ra mắt tính năng hook từ phiên bản 16.8, nó đã thay đổi cách chúng ta quản lý state và xử lý logic trong các function component.
Trong bài viết này, mình sẽ giới thiệu các hook cơ bản trong React và hướng dẫn cách áp dụng chúng vào các ví dụ cụ thể.
1. useState
useState cho phép bạn thêm state vào function component. Thay vì phải dùng class để tạo state, giờ đây bạn có thể thực hiện chỉ với một dòng.
Cách hoạt động: useState trả về một mảng gồm hai phần tử: giá trị hiện tại của state và hàm để cập nhật nó.
const [count, setCount] = useState(0);
Ví dụ thực tiễn: Tạo bộ đếm số lần nhấn nút.
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Bạn đã nhấn {count} lần</p>
<button onClick={() => setCount(count + 1)}>Nhấn tôi</button>
</div>
);
}
Mỗi lần nhấn nút sẽ cập nhật giá trị count và tự động render lại giao diện.
2. useEffect
useEffect giúp xử lí các sideEffect như các hành động như gọi API, đăng ký sự kiện, hoặc thao tác với DOM khi component thay đổi hoặc render lần đầu.
Cách sử dụng: useEffect nhận vào hai tham số, với tham số thứ hai là danh sách các biến mà khi chúng thay đổi, hàm useEffect sẽ được gọi lại.
useEffect(() => {
// Code chạy khi component render hoặc dependencies thay đổi
}, [dependencies]);
Ví dụ: Lắng nghe sự thay đổi kích thước cửa sổ
function WindowSize() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return <div>Chiều rộng cửa sổ hiện tại: {width}px</div>;
}
Với ví dụ này, mỗi khi kích thước cửa sổ thay đổi, giá trị width sẽ được cập nhật và giao diện sẽ tự động render lại.
3. useContext
useContext giúp lấy dữ liệu từ Context API mà không cần truyền qua từng component trung gian.
Cách dùng: Truy cập dữ liệu context bằng cách sử dụng hook useContext.
const theme = useContext(ThemeContext);
Ví dụ: Hiển thị theme dựa trên context.
function ThemedComponent() {
const theme = useContext(ThemeContext);
return <div style={{ backgroundColor: theme.background }}>Hello, World!</div>;
}
4. useRef
useRef tạo ra một tham chiếu có thể lưu giữ giá trị qua các lần render mà không làm thay đổi trạng thái của component.
Cách sử dụng: Thường dùng để thao tác với DOM hoặc lưu trữ thông tin không cần render lại
const inputRef = useRef(null);
Ví dụ: Tự động focus vào ô input khi component được render.
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} />;
}
5. useMemo
useMemo giúp tối ưu hóa hiệu suất bằng cách ghi nhớ kết quả của một hàm tính toán tốn kém, chỉ tính toán lại khi giá trị phụ thuộc thay đổi.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Ví dụ: Ghi nhớ kết quả của một phép tính nặng.
const expensiveResult = useMemo(() => {
return someHeavyCalculation(data);
}, [data]);
6. useCallback
useCallback hoạt động tương tự như useMemo, nhưng dành cho hàm. Nó ghi nhớ hàm và chỉ tạo lại khi dependencies thay đổi.
const memoizedFunction = useCallback(() => {
performAction(a, b);
}, [a, b]);
Ví dụ: Giảm thiểu render không cần thiết của các component con.
const handleClick = useCallback(() => {
console.log("Button clicked");
}, []);
return <Button onClick={handleClick}>Nhấn tôi</Button>;
Kết luận
- Hiểu và sử dụng tốt các hook cơ bản trong React sẽ giúp bạn tối ưu hóa hiệu suất và quản lý state hiệu quả hơn.
- Hãy thử áp dụng các ví dụ vào dự án thực tế để cảm nhận được sự tiện lợi của các hook này.
Ở trên là 1 số chia sẻ về react hook của mình, vì đây đa phần là kiến thức mình tự học nên có thể bài viết này có thể có nhiều chỗ chưa chính xác và thiếu sót, mong mọi người góp ý ở dưới phần bình luận để bài viết thêm hoàn chỉnh và xây dựng một cộng đồng nơi mọi người có thể chia sẻ kinh nghiệm lập trình cho nhau 😘.
By
