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

# Accessing data with context

> An Autocomplete context lets you store data and access it in different lifecycle hooks.

<Callout icon="triangle-alert" color="#F59E0B">
  Prefer using the Autocomplete widget from InstantSearch instead of the standalone Autocomplete library.
  It integrates more closely with your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Callout>

Use an Autocomplete context to store and share data across your app.
For example, when retrieving hits from Algolia,
you may want to reuse the total number of results to update a [template](/doc/ui-libraries/autocomplete/core-concepts/templates).

## Usage

Context exposes a `setContext` function,
which takes an object and merges it with the existing context.
You can then access the context in `state.context`.

The following example stores the number of hits from an Algolia response,
making it accessible everywhere in your autocomplete.

```js JavaScript icon=code theme={"system"}
autocomplete({
  // ...
  getSources({ query, setContext }) {
    return [
      {
        sourceId: "products",
        getItems() {
          return getAlgoliaResults({
            searchClient,
            queries: [
              {
                indexName: "instant_search",
                query,
              },
            ],
            transformResponse({ results, hits }) {
              setContext({
                nbProducts: results[0].nbHits,
              });

              // You can now use `state.context.nbProducts`
              // anywhere where you have access to `state`.

              return hits;
            },
          });
        },
        // ...
      },
    ];
  },
});
```

Context can be handy when developing [Autocomplete plugins](/doc/ui-libraries/autocomplete/core-concepts/plugins).
It avoids polluting the global namespace while still being able to pass data around across different lifecycle hooks.

```js JavaScript icon=code theme={"system"}
function createAutocompletePlugin() {
  return {
    // ...
    subscribe({ setContext }) {
      setContext({
        autocompletePlugin: {
          // ...
        },
      });
    },
  };
}
```

## Reference

The `setContext` function is accessible on your `autocomplete` instance.

It's also provided in:

* [`getSources`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-get-sources)
* [`onSubmit`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-on-submit)
* [`onReset`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-on-reset)
* [`source.onActive`](/doc/ui-libraries/autocomplete/core-concepts/sources#param-on-active)
* [`source.onSelect`](/doc/ui-libraries/autocomplete/core-concepts/sources#param-on-select)
* [`source.getItems`](/doc/ui-libraries/autocomplete/core-concepts/sources#param-get-items)
* `plugin.subscribe`

The `context` object is available on the [`state`](/doc/ui-libraries/autocomplete/core-concepts/state#state-object) object.

<ParamField path="setContext" type="(value: Record<string, unknown>) => void">
  The function to pass data to store it in the context.
</ParamField>

<ParamField path="context" type="Record<string,unknown>">
  The context to read data from.
</ParamField>