emlahieu

Custom Hooks cần biết cho FE

date
Mar 27, 2026
slug
7-custom-hooks-cuc-hay
status
Published
tags
Front-end
summary
7 Custom Hooks Cực Hay Mà Mọi Frontend Developer Nên Bỏ Túi
type
Post

7 Custom Hooks Cực Hay Mà Mọi Frontend Developer Nên Bỏ Túi

Anh em chắc quá quen với việc viết custom hook cho dự án và mỗi anh em có trong túi bộ custom hook hay dùng của mình
Hôm nay mình muốn chia sẻ về một thư viện hooks có code sẵn cực kỳ tiện lợi mà có thể sẽ giúp anh em code nhanh hơn mà không cần code lại nhiều. Đó chính là useHooks - một nơi tổng hợp các custom React Hooks cực ngon và có sẵn trên npm.
Vậy nó là gì, có gì hot? bắt đầu thôi!!! 😄😄😄

Giới Thiệu Về useHooks

Nó là....1 bộ thư viện sẵn các custom hook hay ho mà anh em trên toàn thế giới đang dùng
https://usehooks.com/
image.png

Cài Đặt

Đơn giản chỉ cần chạy:
npm i @uidotdev/usehooks

Cùng điểm qua 7 Hooks hay dùng trong bộ này nha

Mình sẽ đi qua từng hook một, giải thích công dụng và cách sử dụng nhé!

1. useMediaQuery - Xử Lý Responsive Design Dễ Dàng

Hook này giúp detect CSS media queries một cách real-time. Cực kỳ hữu ích cho responsive design!
Use case phổ biến:
  • Render UI khác nhau theo kích thước màn hình
  • Điều chỉnh layout cho mobile/tablet/desktop
  • Conditional rendering dựa trên viewport
Ví dụ:
import { useMediaQuery } from "@uidotdev/usehooks";

export default function App() {
  const isSmallDevice = useMediaQuery("only screen and (max-width : 768px)");
  const isMediumDevice = useMediaQuery(
    "only screen and (min-width : 769px) and (max-width : 992px)"
  );
  const isLargeDevice = useMediaQuery(
    "only screen and (min-width : 993px) and (max-width : 1200px)"
  );
  const isExtraLargeDevice = useMediaQuery(
    "only screen and (min-width : 1201px)"
  );

  return (
    <section><h1>useMediaQuery Demo</h1>{isSmallDevice && <div>Màn hình nhỏ ≤ 768px</div>}{isMediumDevice && <div>Màn hình trung bình: 769px - 992px</div>}{isLargeDevice && <div>Màn hình lớn: 993px - 1200px</div>}{isExtraLargeDevice && <div>Màn hình rất lớn ≥ 1201px</div>}</section>
  );
}
Lưu ý: Hook này chỉ chạy client-side (browser), không dùng được server-side nha!

2. useHover - Xử Lý Hover Effects

Khi anh em muốn tạo hiệu ứng hover mà không cần phải viết nhiều CSS? Hook này giúp anh em detect khi user hover vào element một cách dễ dàng.
Use case:
  • Hover animations
  • Interactive UI elements
  • Hiển thị tooltips
Ví dụ:
import { useHover } from "@uidotdev/usehooks";

function getRandomColor() {
  const colors = ["#10b981", "#3b82f6", "#a855f7", "#ef4444", "#ec4899"];
  return colors[Math.floor(Math.random() * colors.length)];
}

export default function App() {
  const [ref, hovering] = useHover();
  const backgroundColor = hovering ? getRandomColor() : "#374151";

  return (
    <div
      ref={ref}
      style={{
        backgroundColor,
        width: "300px",
        height: "150px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      Đang hover?{hovering ? "Có" : "Không"}</div>
  );
}

3. useCopyToClipboard - Copy Văn Bản Cực Dễ

Chức năng copy to clipboard là must-have trong nhiều app. Hook này giúp implement feature đó cực nhanh!
Use case:
  • Copy API keys
  • Copy mã code
  • Copy links, referral codes
  • Copy bất kỳ text nào
Ví dụ:
import { useCopyToClipboard } from "@uidotdev/usehooks";

const randomHash = crypto.randomUUID();

export default function App() {
  const [copiedText, copyToClipboard] = useCopyToClipboard();
  const hasCopiedText = Boolean(copiedText);

  return (
    <section><h1>Copy API Key</h1><pre><code>{randomHash}</code><button
          disabled={hasCopiedText}
          onClick={() => copyToClipboard(randomHash)}
        >{hasCopiedText ? "Đã copy ✓" : "Copy"}</button></pre>{hasCopiedText && (
        <div><h4>Copied thành công 🎉</h4><textarea placeholder="Paste vào đây thử xem" /></div>
      )}</section>
  );
}
Hook này tự động fallback sang document.execCommand("copy") nếu navigator.clipboard không khả dụng. Smart!

4. useToggle - Toggle State Đơn Giản

Toggle on/off là pattern cực kỳ phổ biến. Hook này giúp quản lý boolean state một cách vô cùng clean
Use case:
  • Show/hide modals
  • Toggle sidebar/menu
  • Dark/light mode
  • Expand/collapse sections
  • Show more/less content
Ví dụ:
import { useToggle } from "@uidotdev/usehooks";

export default function App() {
  const [on, toggle] = useToggle(true);

  return (
    <section><h1>Toggle Demo</h1><button disabled={on} onClick={() => toggle(true)}>
        Bật</button><button disabled={!on} onClick={() => toggle(false)}>
        Tắt</button><button onClick={toggle}>
        Toggle</button><div><label><input
            onChange={toggle}
            type="checkbox"
            checked={on}
          /><span>Trạng thái:{on ? "Bật" : "Tắt"}</span></label></div></section>
  );
}

5. useIdle - Detect Khi User Không Hoạt Động

Hook này cực kỳ hữu ích cho các tình huống cần biết user có đang active hay không
Use case:
  • Auto logout khi user idle quá lâu (banking/healthcare apps)
  • Pause video khi không xem
  • Tắt animations để tiết kiệm pin
  • Pause background processes
  • Hiển thị screensaver
Ví dụ:
import { useIdle } from "@uidotdev/usehooks";

export default function App() {
  const idle = useIdle(5000); // 5 giây

  return (
    <section><h1>useIdle Demo</h1><div><label>Trạng thái:{idle ? "Idle" : "Active"}</label></div>{idle ? (
        <p>Đã 5 giây rồi, di chuyển chuột đi bạn! 🖱️</p>
      ) : (
        <p>Đứng yên và chờ 5 giây xem...</p>
      )}</section>
  );
}

6. useMeasure - Đo Kích Thước Element

Hook này giúp anh em đo kích thước của element một cách real-time. Hoàn hảo cho anh em nào có các dự án cần layouts linh hoạt!
Use case:
  • Responsive components
  • Dynamic layouts
  • Show element size feedback
  • Resize handlers
Ví dụ:
import { useMeasure } from "@uidotdev/usehooks";

export default function App() {
  const [firstRef, { width: firstWidth }] = useMeasure();
  const [secondRef, { width: secondWidth }] = useMeasure();

  const lineStyle = (width) => ({
    width: `${width}px`,
    height: "4px",
    backgroundColor: "blue",
    resize: "horizontal",
    overflow: "auto",
    minWidth: "50px",
    maxWidth: "100%",
  });

  return (
    <div><div ref={firstRef} style={lineStyle(250)} /><p>Chiều rộng line 1:{Math.floor(firstWidth)}px</p><div ref={secondRef} style={lineStyle(150)} /><p>Chiều rộng line 2:{Math.floor(secondWidth)}px</p></div>
  );
}

7. useLocalStorage - Sync State Với LocalStorage

Hook này tự động sync state của bạn với localStorage. Quá tiện cho việc persist data!
Use case:
  • Save user preferences
  • Theme settings (dark/light mode)
  • Cache API responses
  • Store auth tokens
  • Save form drafts
  • Remember user inputs
Ví dụ với Theme Preference:
import { useLocalStorage } from "@uidotdev/usehooks";

export default function App() {
  const [theme, setTheme] = useLocalStorage("theme", "light");
  const [username, setUsername] = useLocalStorage("username", "");

  return (
    <section style={{
      backgroundColor: theme === "dark" ? "#1a1a1a" : "#ffffff",
      color: theme === "dark" ? "#ffffff" : "#000000",
      padding: "20px"
    }}><h1>Theme Settings</h1><div><label>Username:</label><input
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="Nhập tên của bạn"
        /></div><div style={{ marginTop: "20px" }}><button onClick={() => setTheme("light")}>
          Light Mode ☀️</button><button onClick={() => setTheme("dark")}>
          Dark Mode 🌙</button></div><p style={{ marginTop: "20px" }}>
        Xin chào{username || "bạn"}! Theme hiện tại:{theme}</p><p style={{ fontSize: "14px", color: "gray" }}>
        💡 Reload trang xem, settings vẫn được lưu!</p></section>
  );
}
Đơn giản mà hiệu quả! Data tự động sync với localStorage, reload trang vẫn giữ nguyên! ✨

🎁 Bonus: useCounter - Counter Logic Đơn Giản

Last but not least, một hook classic cho counter với min/max constraints!
Use case:
  • Pagination
  • Step-based forms
  • Rating systems
  • Quantity selectors
  • Inventory management

More posts