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

# renderState

> Object with state data about all widgets.

export const Filter = () => <Tooltip tip="A filter is a condition that limits which records Algolia returns. Filters often use one or more facet-value pairs, such as brand:Apple AND color:red. You can also filter by numeric values, dates, tags, booleans, or geographic constraints." cta="Filtering" href="/doc/guides/managing-results/refine-results/faceting">
    filter
  </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>

```tsx Signature theme={"system"}
const { renderState } = useInstantSearch();
```

## About this widget

The `renderState` property provides all the data and functions from the widgets.
It lets you access the render state of any widget,
so you can create custom widgets or refine the search outside the InstantSearch lifecycle.

This is mainly useful for creating components that interact with multiple widgets at once, without mounting as many widgets.
A good example would be showing which individual <Filter /> hit is applied.

## Examples

You can access the render state of the `searchBox` widget.

```jsx JavaScript icon=code theme={"system"}
const indexName = "<index-name>";

function App({ searchClient }) {
  return (
    <InstantSearch indexName={indexName} searchClient={searchClient}>
      <SearchBox />
      <RenderState />
    </InstantSearch>
  );
}

function RenderState() {
  const { renderState, indexRenderState } = useInstantSearch();

  console.log(renderState[indexName].searchBox);
  console.log(indexRenderState.searchBox);
  /*
  {
    query: string;
    refine: Function;
    clear: Function;
    isSearchStalled: boolean;
    widgetParams: object;
  }
*/

  return null;
}
```

## Working with virtual widgets

To access the `renderState` of widgets, you must add them to InstantSearch.
If you don't want to add a widget to the UI,
but want to get access to its `renderState`,
you can add it as a virtual, or renderless widget.

```jsx JavaScript icon=code theme={"system"}
function VirtualPagination(props) {
  usePagination(props);
  return null;
}

function NextPage() {
  const { indexRenderState } = useInstantSearch();

  return (
    <button
      onClick={() =>
        indexRenderState.pagination?.refine(
          indexRenderState.pagination?.currentRefinement + 1,
        )
      }
    >
      Next Page
    </button>
  );
}

function App({ searchClient }) {
  return (
    <InstantSearch indexName="indexName" searchClient={searchClient}>
      <VirtualPagination />
      <NextPage />
    </InstantSearch>
  );
}
```

## Example: interactive categories in a hit

This example displays a list of categories in a hit, and lets users refine the search by clicking on them.

```jsx JavaScript icon=code theme={"system"}
function App({ searchClient }) {
  return (
    <InstantSearch indexName="indexName" searchClient={searchClient}>
      <SearchBox />
      <RefinementList attribute="categories" />
      <Hits hitComponent={HitComponent} />
    </InstantSearch>
  );
}

function HitComponent({ hit }) {
  const { indexRenderState } = useInstantSearch();
  const refine = indexRenderState.refinementList?.categories?.refine;

  return (
    <div>
      <Highlight hit={hit} attribute="name" />
      <ul>
        {hit.categories.map((category) => (
          <li key={category}>
            <button
              onClick={() => {
                refine(category);
              }}
            >
              {category}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

## Type definition

```ts TypeScript icon=code theme={"system"}
type RenderState = {
  [indexId: string]: IndexRenderState;
}

type IndexRenderState = Partial<{
  searchBox: SearchBoxState;
  autocomplete: AutocompleteState;
  breadcrumb: BreadcrumbState;
  clearRefinements: ClearRefinementsState;
  configure: ConfigureState;
  currentRefinements: CurrentRefinementsState;
  hierarchicalMenu: {
    [attribute: string]: HierarchicalMenuState;
  }
  hits: HitsState;
  infiniteHits: InfiniteHitsState;
  analytics: AnalyticsState;
  places: PlacesState;
  poweredBy: PoweredByState;
  range: {
    [attribute: string]: RangeState;
  ratingMenu: {
    [attribute: string]: RatingMenuState;
  };
  numericMenu: {
    [attribute: string]: NumericMenuState;
  };
  voiceSearch: VoiceSearchState;
  geoSearch: GeoSearchState;
  queryRules: QueryRulesState;
  hitsPerPage: HitsPerPageState;
  pagination: PaginationState;
  refinementList: {
    [attribute: string]: RefinementListState;
  };
  answers: AnswersState;
}>;
```