Giới thiệu react‑state‑custom: Quản lý trạng thái với React hooks

Quản lý trạng thái trong ứng dụng React hiện đại đôi khi khá phức tạp: bạn cần đảm bảo dữ liệu được chia sẻ giữa các component mà vẫn giữ hiệu năng và an toàn về kiểu. Nhiều thư viện phổ biến như Redux, Zustand mang lại sức mạnh nhưng lại yêu cầu bạn học thêm reducer, action, middleware… react‑state‑custom chọn một hướng đi khác: tận dụng những gì bạn đã quen thuộc — React hooks.

Vì sao chọn react‑state‑custom?

Thư viện này được thiết kế với các tiêu chí:

• Không cần boilerplate: bạn viết logic trạng thái với useState, useEffect, useMemo và chia sẻ với component khác chỉ với một dòng gọi.
• Render có chọn lọc: component chỉ re-render khi dữ liệu bạn subscribe thay đổi, không bị ảnh hưởng bởi các trường khác.
• Tự động quản lý context: AutoRootCtx tự tạo và hủy context khi cần, không phải bọc provider thủ công.
• Hỗ trợ TypeScript đầy đủ: tự suy luận kiểu, IDE hiểu rõ cấu trúc dữ liệu của bạn.
• Gọn nhẹ: gói npm ~10 KB (đã nén gzip) và không phụ thuộc thêm thư viện nào ngoài React.
• DevTool tích hợp: component DevToolContainer giúp bạn xem toàn bộ trạng thái của các context đang hoạt động ngay trong trình duyệt.

Cài đặt và ví dụ nhanh

Cài đặt thư viện:

npm install react-state-custom
# hoặc
yarn add react-state-custom

Ví dụ dưới đây tạo bộ đếm đơn giản:

import {
  createRootCtx,
  createAutoCtx,
  useQuickSubscribe,
  AutoRootCtx
} from "react-state-custom";
import React, { useState } from "react";

// 1. Viết logic trạng thái bằng hooks
function useCounterState() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return { count, increment, decrement };
}

// 2. Tạo root context
const counterRoot = createRootCtx("counter", useCounterState);

// 3. Tạo auto context để tự mount/unmount
const { useCtxState: useCounterCtx } = createAutoCtx(counterRoot);

function Counter() {
  const ctx = useCounterCtx();
  // useQuickSubscribe chỉ subscribe những trường được truy cập
  const { count, increment, decrement } = useQuickSubscribe(ctx);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

function App() {
  return (
    <>
      <AutoRootCtx />
      <Counter />
    </>
  );
}

Không cần reducer hay action — chỉ sử dụng hooks quen thuộc. Nhờ useQuickSubscribe, component Counter sẽ chỉ re-render khi count thay đổi.

Tính năng nâng cao

• Subscribe theo khóa: useDataSubscribe (một khóa) và useDataSubscribeMultiple (nhiều khóa) cho phép debounce, chuyển đổi dữ liệu (useDataSubscribeWithTransform).
• Context tham số: truyền props vào useCtxState({ id }) để tạo context riêng cho từng id (ví dụ: theo userId).
• Kiểm soát vòng đời: hàm createAutoCtx(root, delayMs) cho phép giữ context một khoảng thời gian trước khi hủy (hữu ích khi mount/unmount liên tục).
• Wrapper & debug: AutoRootCtx nhận prop Wrapper (như ErrorBoundary) và debugging để hiển thị snapshot raw của state phục vụ debug.

Kết luận

Nếu bạn thích quản lý trạng thái bằng React hooks và muốn một giải pháp đơn giản nhưng mạnh mẽ, hãy thử react‑state‑custom. Thư viện này giúp bạn kiểm soát quá trình re-render, giảm boilerplate và vẫn giữ được lợi ích của TypeScript.

• 📦 Repo: github.com/vothanhdat/react-state-custom
• 🌐 Demo: vothanhdat.github.io/react-state-custom
• 📦 Cài đặt: npm install react-state-custom

Bạn có thể tham khảo thêm tài liệu và ví dụ trực tuyến để hiểu rõ hơn. Rất mong nhận được ý kiến đóng góp và câu hỏi từ cộng đồng! Bài viết gốc: https://dev.to/vothanhdat/introducing-react-state-custom-a-hook-first-state-management-library-13g8