Foresight

Predict likely user clicks from interaction signals to prefetch routes and data earlier.

What is Foresight?

ForesightJS is an intent-prediction library for the web. Instead of waiting for an actual click, it watches interaction signals (pointer trajectory, movement, and timing) to estimate what the user is likely to click next.

That early signal gives your app a short head start to prefetch route code, data, or assets before navigation happens, which can reduce perceived latency without changing your visible UI.

Installation

pnpm add js.foresight react.foresight

Basic usage

import { useForesight } from "react.foresight";

export function PrefetchButton() {
  const { elementRef, registerResults } = useForesight<HTMLButtonElement>({
    callback: () => {
      // Put lightweight prefetch logic here.
      console.log("Prefetching data...");
    },
    hitSlop: 10,
    name: "prefetch-button",
  });

  return (
    <button ref={elementRef} data-registered={registerResults?.isRegistered}>
      Hover to prefetch
    </button>
  );
}

Return values

useForesight returns:

elementRef: attach this to the target element.
registerResults: registration metadata such as isRegistered.

On the first render, both can be null because React refs are attached after mount. For fallback behavior, check registration flags when available instead of treating null as a hard failure.

Practical guidance

Keep callbacks idempotent and fast. Trigger prefetch, not full data hydration.
Use name to label tracked elements for easier debugging.
Tune hitSlop conservatively. Larger values prefetch earlier but may overfetch.
Skip aggressive prefetching on constrained connections.

Framework integrations

If you want component-level abstractions, use the official integrations: