Migrating to v4

In v3 there was no React package - the docs handed you a useForesight hook to copy into your own project. v4 replaces that with the official @foresightjs/react package. Install it, delete your copied file, and update a couple of names.

Install the package and delete your hand-rolled useForesight.ts:

npm install @foresightjs/react

Then update the import and the return shape:

- import useForesight from "./hooks/useForesight"
+ import { useForesight } from "@foresightjs/react"

- const { elementRef, registerResults } = useForesight({ callback, name })
+ const { elementRef, isRegistered, isPredicted } = useForesight({ callback, name })

What changed:

• The state is flattened onto the return value. There's no registerResults object anymore. registerResults.isRegistered becomes isRegistered, and you also get the rest of the reactive state (isPredicted, isActive, hitCount, …) which re-renders when it changes. See useForesight.
• elementRef is now a callback ref. You still attach it the same way (ref={elementRef}), so your JSX doesn't change.
• registerResults.isTouchDevice is gone. Touch devices are handled internally by the configured touchDeviceStrategy, so the manual fallback branch is no longer needed.

Core changes

The core js.foresight library also has a few breaking changes. The package handles most of these for you, but they matter if you call register() or listen to events directly.

The register() call itself is unchanged, but element data is now an immutable state snapshot you can subscribe to - the foundation the wrapper packages are built on:

• ForesightElementData is now ForesightElementState. Your callback receives the flat state snapshot: callback: (state: ForesightElementState) => void. See TypeScript.
• register() returns the state plus unregister, subscribe and getSnapshot. isTouchDevice is gone from the result; touch devices are handled internally by the configured touchDeviceStrategy global setting.
• The elementDataUpdated, elementOptionsUpdated and elementReactivated events are removed. Per-element changes are now observed through the subscribe/getSnapshot pair returned by register(). The remaining events carry the state in a state field instead of elementData.
• Detached elements are parked, not unregistered. Removing an element from the DOM no longer emits elementUnregistered with reason disconnected; the element stays registered but inactive and resumes when it reconnects.
• New enabled element option. Set it to false to keep an element registered but excluded from prediction.