feat(useInstantSearch): expose renderState

[Haroenv]

Summary

The renderState is useful for interacting with a different widget that you know / assume is also mounted. This is good for example for refining within a hit component without adding a second refinement widget (which could have side effects if hits is conditional, despite that impact being made smaller through #5123).

Can also be useful for a reusable widget that allows the user to pass their own options to e.g. refinementList, but still expects it to be mounted by the user.

An example use case:

function Hits(props) {
  const { renderState } = useInstantSearch();
  const { hits } = useHits();

  return (
    <ol>
      {hits.map((hit) => (
        <li key={hit.objectID}>
          <button
            type="button"
            onClick={() => {
              indexRenderState.refinementList.keyword.refine(hit.keyword);
            }}
          >
            {hit.keyword}
            {indexRenderState.refinementList.keyword.items.find(
              (item) => item.label === hit.keyword
            )
              ? ' (refined)'
              : ''}
          </button>
        </li>
      ))}
    </ol>
  );
}

Result

RFC-71 is implemented more completely

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a3911ae:

Sandbox	Source
InstantSearch.js	Configuration
react-instantsearch-app	Configuration
example-react-instantsearch-default-theme	Configuration
example-react-instantsearch-next-app-dir-example	Configuration
example-vue-instantsearch-default-theme	Configuration

[francoischalifour]

I'm wondering if at some point we want to provide render state as a generic to InstantSearch, like UI state and Route state. Currently I don't think there's a way to have a type-safe render state with custom widgets.

[francoischalifour]

Is there a reason why we have this {} fallback for the index render state but it's not needed for the index UI state?

[Haroenv]

getUiState uses the mounted index widgets (all) as its start value, but renderState starts with an empty object

[Haroenv]

Currently I don't think there's a way to have a type-safe render state with custom widgets

You're right, I think it should be reworked, and instead of passing UiState it should be a list of widgets and we can infer all other things from it (uiState, renderState), but not easy to do that backwards compatible / correctly