Resolving Circular References with useFlow

💡

You can easily resolve the useFlow() circular reference issue by using the Future API. We recommend using the Future API.

The useFlow() function returned by the stackflow() function utilizes the declared activity types. Therefore, useFlow() and activity components interlock, causing a circular dependency. By using the useActions() hook and importing the types separately, you can eliminate this circular dependency.

stackflow.ts

import { stackflow } from "@stackflow/react";
 
export const { Stack, activities } = stackflow({
  activities: {
    // ...
  },
  // ...
});
 
// Expose the type of activities like this.
export type TypeActivities = typeof activities;

stackflow.ts

import { useActions } from "@stackflow/react";
 
// Only import the exposed activity type.
import type { TypeActivities } from "./stackflow";
 
export const useMyFlow = () => {
  return useActions<TypeActivities>();
};

⚡️

TypeActivities will be similarly utilized in future utility components/hooks.

Synchronizing with History Preloading