# Upgrade v4 to v5

## Renamed things

Some components and props have been renamed, Typescript should alert you to all of these issues e.g. The **SensorStack** component has been renamed to **Sensors** and the **ResultStateProvider** component has been renamed to **Stats**.

## Refactored things

Other components have been refactored to varying degrees, wrapping common verbose patterns into simpler alternatives.

e.g. Previously you would use the **render** props on the **FilterStack** component to iterate over the available filters and pass them into the **Filter** component where you would then use it's **renderFilterList** (and similar props) to render a filter.

{% code title="Reactify Search v4" %}

```typescript
import { FilterStack } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <FilterStack
      render={(filters) => filters.map((filter) => (
        <Filter
          filter={filter}
          renderFilterList={...}
          renderFilterRange={...}
          renderFilterSlider={...}
        />
      )}
    />
  );
};

```

{% endcode %}

The **FilterStack** component has now been renamed to **Filters** and does the iterating itself and exposes the props found on the **Filter** component.

{% code title="Reactify Search v5" %}

```typescript
import { Filters } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <Filters
      renderFilterList={...}
      renderFilterRange={...}
      renderFilterSlider={...}
    />
  );
};
```

{% endcode %}

*The functionality of the two snippets above is identical.*

In addition there are now many more utility hooks available, e.g. the **useFilters** hook provides all of the active filters, this is useful if you'd like to conditionally hide some of them based on which collection is being viewed or if certain filters are shown in different areas of the page.

## The product grid

Previously when using the **ResultList** component (renamed to **Results**) you would render results with the **renderResults** props, this prop gave you access to all results in an array which you would iterate over and render into a grid of your choosing.

This has changed for many reasons and now the grid itself is controlled by the **Results** component and you're only given access render props for the individual results rather than the entire array and so migrating from controlling the entire array to controlling a single result can be problematic from a design perspective.

There are two props on the **Results** component called **listStyle** and **listClassName** which allow you to customize the CSS of the grid yourself, it's important that a CSS grid is used but other than that you're able to style it in whatever way makes sense. Many merchants using class-based-styling e.g. tailwind can simply use the **listClassName** prop to apply the relevant styling based on breakpoints and for the most part this works like the **className** prop for any other component.

You may find that previously there was a lot of additional components and design elements being rendered within the **renderResults** prop and many times it relied on data such as the result stats e.g. total number of results which can now be found in the **Stats** component and any of those design elements should most likely be moved outside of the **Results** component and wrapped within a **Stats** component to get access to the data. See the example migration below for more context.

{% code title="Reactify Search v4" %}

```typescript
import { ResultList } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <ResultList
      renderResults={(renderProps) => (
        <>
          Total results: {renderProps.resultStats.numberOfResults}
          <div className="grid gap-2 ...">
            {renderProps.results.map((result) => ...}
          </div>
        </>
      )}
    />
  );
};
```

{% endcode %}

{% code title="Reactify Search v5" %}

```typescript
import { Results, Stats } from "@usereactify/search";

export const Component: React.FC = () => {
  return (
    <>
      <Stats
        render={(renderProps) => (
          <>
            Total results: {renderProps.resultStats.numberOfResults}
          </>
        )}
      >
      <Results
        listClassName="grid gap-2 ..."
        renderResultCardProduct={(renderProps) => ...}
        renderResultCardCallout={(renderProps) => ...}
      />
    </>
  );
};
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://search.docs.reactify.com.au/guides/upgrade-v4-to-v5.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.