Cách React Custom Hooks giúp bạn "tái sử dụng" logic và thoát cảnh copy-paste mệt mỏi

Bạn đã bao giờ rơi vào cảnh viết xong một tính năng xịn xò trong React, rồi chợt nhận ra mình phải copy y hệt đoạn code đó sang 3-4 component khác chưa? Cảm giác lúc đó thật sự là "tiến thoái lưỡng nan": vừa muốn nhanh cho xong việc, vừa thấy tội lỗi vì đang làm bẩn codebase của chính mình. Nếu bạn đang loay hoay với đống code lặp đi lặp lại đó, thì React Custom Hooks chính là chiếc "phao cứu sinh" mà bạn đang tìm kiếm.

Trong thế giới của React, chúng ta thường nói nhiều về việc tái sử dụng component (giao diện). Nhưng còn logic xử lý bên dưới thì sao? React Custom Hooks cho phép bạn đóng gói các logic phức tạp lại thành một hàm duy nhất, có thể mang đi dùng ở bất cứ đâu như những mảnh ghép Lego. Hãy cùng mình tìm hiểu cách biến code của bạn từ một mớ hỗn độn thành một hệ thống thông minh nhé.

Tại sao Custom Hooks lại là "vũ khí hạng nặng"?

Hãy tưởng tượng bạn đang xây dựng một ứng dụng và cần kiểm tra xem người dùng có đang kết nối mạng hay không. Bạn viết một đoạn logic dùng useState và useEffect để lắng nghe sự kiện online và offline. Mọi thứ chạy tốt cho đến khi trang cá nhân, trang thanh toán và trang cài đặt đều cần tính năng này. Nếu bạn copy đoạn logic đó đi khắp nơi, mỗi lần muốn sửa một dòng code, bạn sẽ phải lùng sục lại 3-4 file khác nhau. Cực vô cùng!

Sử dụng React Custom Hooks giúp bạn giải quyết 3 vấn đề lớn:

• DRY (Don't Repeat Yourself): Viết một lần, dùng mãi mãi.
• Dọn dẹp component: Component của bạn giờ đây chỉ tập trung vào việc hiển thị giao diện, còn logic "nặng đô" đã được đẩy ra ngoài. Điều này khá giống với cách JavaScript Destructuring giúp bạn làm gọn các biến vậy.
• Dễ bảo trì: Muốn thay đổi logic? Chỉ cần sửa đúng một file Hook duy nhất.

Xây dựng Hook đầu tiên: useLocalStorage

Lưu dữ liệu vào localStorage là việc anh em Frontend làm như cơm bữa. Thay vì cứ phải JSON.parse rồi JSON.stringify thủ công, hãy tạo một Custom Hook để nó tự làm hết cho mình. Đây là cách chúng ta nâng cấp trải nghiệm lập trình của chính mình.

import { useState, useEffect } from 'react';

function useLocalStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved !== null ? JSON.parse(saved) : defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

export default useLocalStorage;

Bây giờ, trong bất kỳ component nào, bạn chỉ cần gọi: const [theme, setTheme] = useLocalStorage('theme', 'light'). Nó đơn giản và sạch sẽ y hệt như useState mặc định của React. Khi bạn kết hợp tư duy này với những tính năng mới như trong React 19, hiệu suất làm việc của bạn sẽ tăng lên đáng kể.

Ứng dụng thực tế vào dự án

Không chỉ dừng lại ở localStorage, bạn có thể tạo Hooks cho mọi thứ: từ việc lấy dữ liệu từ API (useFetch), theo dõi vị trí chuột (useMousePosition), cho đến việc quản lý trạng thái form phức tạp. Đừng ngại tách logic ra ngoài ngay khi bạn thấy mình bắt đầu gõ dòng code thứ hai giống hệt dòng đầu tiên ở một file khác.

Việc nắm vững Custom Hooks cũng là một bước đệm quan trọng để bạn hiểu sâu hơn về kiến trúc Frontend hiện đại. Nếu bạn muốn tìm hiểu kỹ hơn về các tiêu chuẩn Hook chính thức, hãy ghé thăm tài liệu chính thức của React nhé.

Việc tái sử dụng logic không chỉ giúp code chạy nhanh hơn mà còn giúp đầu óc bạn thảnh thơi hơn để tập trung vào những bài toán lớn hơn. Bạn đã sẵn sàng để "refactor" lại dự án của mình bằng Custom Hooks chưa? Hay bạn còn đang lo lắng về việc quản lý state giữa các component khác nhau?