Introduction

import { resource } from "@assistant-ui/tap";
import { useState } from "react";

const useCounter = () => {
  const [count, setCount] = useState(0);

  return { count, increment: () => setCount((c) => c + 1) };
};

const Counter = resource(useCounter);

tap is React's hooks, headless. You write a resource the same way you write a React component, with the same hooks (useState, useEffect, useMemo, ...) imported from "react" and the same rules. The only difference is that a resource has no UI: instead of returning JSX, it returns a plain value (state and methods), and it runs anywhere, inside a React component, inside another resource, or standalone with no React at all.

If you know React hooks, you already know tap. There are only three new things:

1. You write a use-prefixed hook and wrap it with resource(useName); the unit returns a value instead of JSX.
2. You instantiate it by calling the factory (Name(props)) to get an element, then host it with useResource.
3. A resource tree can run outside React entirely.

Next steps