---
title: "useSuggest"
slug: "usesuggest"
abstract: "Learn about the useSuggest hook that provides typeahead suggestions and preview results."
---
# useSuggest

The `useSuggest` hook provides typeahead suggestions and document preview results as a user enters a search phrase. It's ideal for building autocomplete and "search-as-you-type" experiences. The hook is only available in versions `2.4.0` and above.

## Configuration

To use the hook, you can provide the `searchIndexId` and the partial search phrase as `query`.

```tsx
import { useSuggest } from '@sitecore-content-sdk/react';

const {
  querySuggestions,
  previewResults,
  isLoading,
  isSuccess,
  isError,
  error,
} = useSuggest({
  searchIndexId: '1234567890',
  query: 'running sho',
  locale: 'en-US',
});
```

## Supported parameters

The hook supports the following options:

<table style="width:100%;" class="informaltable frame-void rules-rows"><thead><tr><th class="th"><p>Parameter</p></th><th class="th"><p>Type</p></th><th class="th"><p>Description</p></th></tr></thead><tbody><tr><td class="td"><p><code class="code">searchIndexId</code></p></td><td class="td"><p>string</p></td><td class="td"><p>The ID of the SitecoreAI search index to retrieve results from.</p><p><span class="emphasis"><em>Required</em></span></p></td></tr><tr><td class="td"><p><code class="code">query</code></p></td><td class="td"><p>string</p></td><td class="td"><p>Partial text used for typeahead suggestions. It is trimmed before the request is sent and mapped to the <code class="code">keyphrase</code> parameter used by <code class="code">SearchService.suggest()</code>. No request is sent when <code class="code">query</code> is omitted or contains only whitespace.</p></td></tr><tr><td class="td"><p><code class="code">locale</code></p></td><td class="td"><p>string</p></td><td class="td"><p>Specify the locale for the request. Required for multi-locale index configurations (for example, <code class="code">'en'</code>, <code class="code">'fr-FR'</code>, <code class="code">'el-GR'</code>). Omit for single-locale indexes.</p></td></tr><tr><td class="td"><p><code class="code">enabled</code></p></td><td class="td"><p>boolean</p></td><td class="td"><p>Specify whether the request runs automatically. Defaults to <code class="code">true</code>.</p></td></tr><tr><td class="td"><p><code class="code">keepPreviousData</code></p></td><td class="td"><p>boolean</p></td><td class="td"><p>Specify whether the previous suggestions and previews should be kept while fetching a new query. Defaults to <code class="code">false</code>.</p></td></tr></tbody></table>

The hook does not send a request when `query` is omitted or contains only whitespace. Use `enabled: false` when the request should not run automatically.

The returned state includes `querySuggestions`, `previewResults`, `status`, `error`, and the loading flags `isLoading`, `isSuccess`, and `isError`. When `keepPreviousData` is enabled, `isPreviousData` indicates that the returned results belong to the previous query while the new request is loading.