> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Polling

## Poll Helper

Polling your server for new information on the current page is common, so Inertia provides a helper to reduce boilerplate. It automatically stops polling when the page is unmounted.

The only required argument is the polling interval in milliseconds.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000)
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000)
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000)
  ```
</CodeGroup>

If you need to pass additional request options to the poll helper, you can pass any of the `router.reload` options as the second parameter.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000, {
      onStart() {
          console.log('Polling request started')
      },
      onFinish() {
          console.log('Polling request finished')
      },
  })
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000, {
      onStart() {
          console.log('Polling request started')
      },
      onFinish() {
          console.log('Polling request finished')
      },
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000, {
      onStart() {
          console.log('Polling request started')
      },
      onFinish() {
          console.log('Polling request finished')
      },
  })
  ```
</CodeGroup>

You may also pass a function that returns the request options. The function is evaluated on every tick, allowing the poll to reflect the latest component state.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { usePoll } from '@inertiajs/vue3'

  const props = defineProps({ counter: Number })

  usePoll(2000, () => ({
      data: { counter_seen: props.counter },
      only: ['last_received'],
  }))
  </script>
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  export default ({ counter }) => {
      usePoll(2000, () => ({
          data: { counter_seen: counter },
          only: ['last_received'],
      }))
  }
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  let { counter } = $props()

  usePoll(2000, () => ({
      data: { counter_seen: counter },
      only: ['last_received'],
  }))
  ```
</CodeGroup>

If you'd like more control over the polling behavior, the poll helper provides `stop` and `start` methods that allow you to manually start and stop polling. You can pass the `autoStart: false` option to the poll helper to prevent it from automatically starting polling when the component is mounted.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { usePoll } from '@inertiajs/vue3'

  const { start, stop } = usePoll(2000, {}, {
      autoStart: false,
  })
  </script>

  <template>
      <button @click="start">Start polling</button>
      <button @click="stop">Stop polling</button>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  export default () => {
      const { start, stop } = usePoll(2000, {}, {
          autoStart: false,
      })

      return (
          <div>
              <button onClick={start}>Start polling</button>
              <button onClick={stop}>Stop polling</button>
          </div>
      )
  }
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  const { start, stop } = usePoll(2000, {}, {
      autoStart: false,
  })
  ```
</CodeGroup>

## Concurrency Mode

By default, the poll helper fires a new request on every tick, even when the previous request is still in flight. You may control this behavior with the `mode` option, which accepts one of three values: `overlap`, `cancel`, or `rest`.

The default `overlap` mode allows requests to run in parallel. The `cancel` mode aborts any in-flight request when the next tick fires. The `rest` mode treats the interval as the time between the end of the previous request and the start of the next one, so requests never overlap.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000, {}, {
      mode: 'rest',
  })
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000, {}, {
      mode: 'rest',
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000, {}, {
      mode: 'rest',
  })
  ```
</CodeGroup>

## Throttling

By default, the poll helper will throttle requests by 90% when the browser tab is in the background. If you'd like to disable this behavior, you can pass the `keepAlive` option to the poll helper.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { usePoll } from '@inertiajs/vue3'

  usePoll(2000, {}, {
      keepAlive: true,
  })
  ```

  ```jsx React icon="react" theme={null}
  import { usePoll } from '@inertiajs/react'

  usePoll(2000, {}, {
      keepAlive: true,
  })
  ```

  ```js Svelte icon="s" theme={null}
  import { usePoll } from '@inertiajs/svelte'

  usePoll(2000, {}, {
      keepAlive: true,
  })
  ```
</CodeGroup>