useAsyncDisposable

Manages async disposable resources using the TC39 Explicit Resource Management proposal.

About

⚠️ Experimental Hook: Import this hook from rooks/experimental. It may change or be removed without notice.

Bridges TC39 Explicit Resource Management (Symbol.asyncDispose) with React lifecycles. It asynchronously creates a disposable resource and disposes it when the component unmounts or when the dependency array changes.

This hook requires Symbol.asyncDispose support at runtime. Browsers such as Safari currently need a polyfill. Load one like core-js/proposals/explicit-resource-management before using this hook.

Examples

Basic usage

import { useAsyncDisposable } from "rooks/experimental";

class ManagedConnection {
  async [Symbol.asyncDispose]() {
    // close the resource
  }
}

async function openConnection() {
  return new ManagedConnection();
}

function Screen() {
  const connection = useAsyncDisposable(() => openConnection(), []);

  if (connection === null) {
    return <div>Loading...</div>;
  }

  return <div>Ready</div>;
}

Recreate the resource when dependencies change

import { useState } from "react";
import { useAsyncDisposable } from "rooks/experimental";

class UserScopedConnection {
  constructor(public userId: string) {}

  async [Symbol.asyncDispose]() {
    // close the user-specific resource
  }
}

async function openUserConnection(userId: string) {
  return new UserScopedConnection(userId);
}

function UserConnectionPanel() {
  const [userId, setUserId] = useState("alice");
  const resource = useAsyncDisposable(
    () => openUserConnection(userId),
    [userId]
  );

  return (
    <div>
      <button onClick={() => setUserId("bob")}>Switch user</button>
      <div>{resource ? `Connected as ${resource.userId}` : "Loading..."}</div>
    </div>
  );
}

Arguments

Argument	Type	Description	Default value
`factory`	`() => Promise<T>`	Async function that creates the resource	required
`deps`	`DependencyList`	Dependency array controlling when the resource is replaced	`[]`

Return value

Return value	Type	Description
`resource`	`T \| null`	The resource, or `null` while the factory is still resolving

Notes

Import from rooks/experimental, not rooks.
rooks does not polyfill Symbol.asyncDispose for you.
If deps change before the factory resolves, the stale resource is disposed immediately when it arrives.