# Foresight component

`Foresight` is the component form of [`useForesight`](/docs/react/useForesight.md): one instance, one registration. It renders in one of two ways.

## Rendering an element with `as`[​](#rendering-an-element-with-as "Direct link to rendering-an-element-with-as")

With `as`, `Foresight` renders that element itself and registers it. All other props are forwarded to the element:

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



function CheckoutButton() {

  return (

    <Foresight as="button" callback={() => prefetch("/checkout")} onClick={checkout}>

      Checkout

    </Foresight>

  )

}
```

`as` accepts any element tag (`"button"`, `"a"`, `"div"`, ...) or a component that forwards its ref to a DOM element.

You can pass your own `ref` (object or callback) to the rendered element. It is merged with the internal registration ref, so you keep direct access to the DOM node while `Foresight` still registers it.

### Reading state in `as` form[​](#reading-state-in-as-form "Direct link to reading-state-in-as-form")

To use the [reactive state](/docs/react/useForesight.md#reactive-state) in this form, pass a function as `children`, `className` or `style` — it receives the state. `Foresight` only subscribes to state-driven re-renders when one of them is a function:

```
<Foresight

  as="button"

  callback={() => prefetch("/checkout")}

  className={({ isPredicted }) => (isPredicted ? "predicted" : "")}

  style={({ isCallbackRunning }) => ({ opacity: isCallbackRunning ? 0.5 : 1 })}

>

  {({ hitCount }) => <>Checkout ({hitCount})</>}

</Foresight>
```

For full control over the rendered markup, use the render-prop form below or [`useForesight`](/docs/react/useForesight.md).

## Render-prop form[​](#render-prop-form "Direct link to Render-prop form")

With a function as children, `Foresight` renders nothing itself. The function receives the [reactive state](/docs/react/useForesight.md#reactive-state) plus the `elementRef` to attach, which gives full control over the markup:

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



function CheckoutButton() {

  return (

    <Foresight foresightName="checkout" callback={() => prefetch("/checkout")}>

      {({ elementRef, isPredicted }) => (

        <button ref={elementRef} className={isPredicted ? "predicted" : ""}>

          Checkout

        </button>

      )}

    </Foresight>

  )

}
```

Whichever element you attach `elementRef` to gets registered, so the manager still mirrors its prediction state onto `data-*` attributes (unless you turn off the global [`setDataAttributes`](/docs/react/configuration/global-settings.md#setdataattributes)). Style it with plain CSS via those attributes, or read the reactive state directly as shown above.

## Options[​](#options "Direct link to Options")

`Foresight` takes the same options as [`useForesight`](/docs/react/useForesight.md), passed as props. The only renamed option is `name`, on the component it is `foresightName`, so the HTML `name` attribute (on `input`, `button`, `select`, ...) falls through to the element like any other prop.

## Dynamic lists[​](#dynamic-lists "Direct link to Dynamic lists")

`Foresight` can be rendered in a loop, registering one element per item.

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



function Nav({ links }: { links: { href: string; label: string }[] }) {

  return (

    <nav>

      {links.map(link => (

        <Foresight

          as="a"

          key={link.href}

          href={link.href}

          foresightName={link.label}

          callback={() => prefetch(link.href)}

        >

          {link.label}

        </Foresight>

      ))}

    </nav>

  )

}
```