# 🗃️ Dolab — A Lightweight Data-Fetching Hook with Zustand Superpowers ⚡

#react #typescript #zustand #opensource

Managing API calls and shared data in React doesn't have to be a hassle. Dolab simplifies this process with a clean, reusable hook powered by Zustand. It's lightweight, fast, and designed for modern frontend development.

🧠 “Dolab” is the Arabic word for "Drawer" — and like a drawer, it stores, fetches, and shares your data neatly. 🧠

🚀 Why Use Dolab?

✅ Minimal API surface
🔁 Auto-refetch with dependency array
📦 Shared data store across components
⏳ Optional cache expiration (lifetime)
💡 TypeScript-first design
⚡ Built on Zustand (no context, no hassle)

📥 Installation

npm install dolab

🔧 Basic Usage Example

import { SetDolabData, useDolab } from "dolab";

type Todo = { userId: number; id: number; title: string; completed: boolean };

const fetch = async (setData: SetDolabData<Todo[]>) => {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  setData(await res.json());
};

export default function Todos() {
  const { data: todos, loading, triggerRefetch } = useDolab<Todo[]>({
    id: "todos", fetch,
  });

  if (!todos) return (
    <button onClick={triggerRefetch}>
      {loading ? "Loading..." : "Load Todos"}
    </button>
  );

  return (
    <ul>{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>
  );
}

🧠 Note: The data is not just fetched and displayed — it’s also persisted inside Dolab’s internal store, powered by Zustand. This means you can reuse the same data anywhere across your application without triggering another API call.

To access this stored data in other components, simply use the useDolabData hook and pass in the same id used earlier ("todos" in this case):
const {data : todos}= useDolabData<Todo[]>({ id: "todos" });
🔄 Important: This works only if useDolab({ id, fetch }) was already called before useDolabData in the application lifecycle. That call is what fetches and stores the data initially. From there, any component can subscribe to and reactively use the shared data without duplication or redundant requests.

🔁 Triggering a Manual Refetch:

You can also manually refetch the stored data when needed — for example, after submitting a form or on a button click. Simply destructure triggerRefetch from useDolabData:
const { triggerRefetch: refetch } = useDolabData<Todo[]>({ id: "todos" });

// Example: Trigger refetch on button click
<button onClick={refetch}>Refresh Todos</button>
This will re-invoke the fetch function defined in useDolab for the same id and update the stored data accordingly.