# Quick Start

Register your first element with ForesightJS in React and see how prediction works.

## Basic Usage Example[​](#basic-usage-example "Direct link to Basic Usage Example")

In React you register an element with the [`useForesight`](/docs/react/useForesight.md) hook. Give it a callback and attach the returned `elementRef` to the element you want to track:

```
import { useForesight } from "@foresightjs/react"

function PrefetchButton() {
  const { elementRef } = useForesight<HTMLButtonElement>({
    callback: () => console.log("prefetch logic here"),
  })

  return <button ref={elementRef}>Prefetch</button>
}
```

That's it!

Unregistration is automatic

The hook registers the element when it mounts and unregisters it when the component unmounts, so you never have to call `unregister()` yourself.

## Provide registration options[​](#provide-registration-options "Direct link to Provide registration options")

For finer control, pass any of these options:

```
import { useForesight } from "@foresightjs/react"

function PrefetchButton() {
  const { elementRef } = useForesight<HTMLButtonElement>({
    callback: () => console.log("prefetch logic here"),
    hitSlop: 50, // slop around the element, making its hitbox bigger
    name: "My Foresight button!", // name visible in the debug tools
    meta: {
      route: "/about",
    }, // your custom meta data for analytics
    reactivateAfter: 5 * 60 * 1000, // time for the element to reactivate after the callback has been hit
  })

  return <button ref={elementRef}>Prefetch</button>
}
```

See [registration options](/docs/react/configuration/registration-options.md) for the full list. The hook also returns the element's reactive prediction state (`isPredicted`, `isActive`, …); read about it in [useForesight](/docs/react/useForesight.md#reactive-state).

## Development Tools[​](#development-tools "Direct link to Development Tools")

ForesightJS has dedicated [Development Tools](/docs/react/devtools.md) that help you understand and tune how prediction is working in your application:

```
pnpm add js.foresight-devtools
# or
npm install js.foresight-devtools
# or
yarn add js.foresight-devtools
```

```
import { ForesightDevtools } from "js.foresight-devtools"

// Initialize development tools
ForesightDevtools.initialize({
  // optional props
})
```