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

# uiState

> Object with the state of your search UI.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

## About this widget

The `uiState` object represents the state of the search UI and can be saved and returned to later.
It's updated whenever the user interacts with the UI and can be used to:

* Store the current search query and parameters
* Pass data to widgets
* Determine which results to show when a user visits a new page
  ([routing](/doc/api-reference/widgets/instantsearch/react#param-routing))

It doesn't directly store search results:
just the state that leads to those results.

### Example

This is an example of an InstantSearch `uiState` object.
It represents what the user has searched for, how they've refined the results, and how the results are displayed.

Replace `INDEX_NAME` with the name of your Algolia <Index />.

```ts TypeScript icon=code theme={"system"}
import type { UiState } from "instantsearch.js";

const uiState: UiState = {
  INDEX_NAME: {
    query: "Hill Valley",
    refinementList: {
      colors: ["white", "black"],
    },
    configure: {
      distinct: true,
    },
    menu: {
      category: "Decoration",
    },
    hierarchicalMenu: {
      categories: ["Decoration > Clocks"],
    },
    numericMenu: {
      price: "100:500",
    },
    ratingMenu: {
      rating: 4,
    },
    range: {
      ageInYears: "2:10",
    },
    toggle: {
      freeShipping: true,
    },
    geoSearch: {
      boundingBox: "47.3165,4.9665,47.3424,5.0201",
    },
    sortBy: "most_popular_index",
    page: 2,
    hitsPerPage: 20,
  },
};
```

### Custom widgets

To have your custom widgets interact with the `uiState` object,
you need to implement the `getWidgetUiState` and `getWidgetSearchParameters` methods in the connector.
To learn more, see [Custom widgets](/doc/guides/building-search-ui/widgets/create-your-own-widgets/react#interact-with-routing).