[react-instantsearch-hooks] Hiding Facet widgets remove selected filters

[avremel]

I'm using hooks like useCurrentRefinements to render custom filtering components. The docs seem to imply that the hook call and the markup can be colocated.

I've noticed that when selecting a facet value and then hiding the facet component, the filters get dropped.

It's common for facet widgets to be hidden when they are rendered in:

• a collapsible accordion
• a modal
• a slide-out

An attempted solution would be to create a custom hook hoisted to the root of the component tree. That custom hook can make calls to the Algolia hooks and pass the data to children components which are tasked with rendering the markup. However, I'm unclear:

• How to keep the return value fresh with the newest async results from the Algolia hooks.
• How to handle a dynamic list of facets (determined by the particular page/url). Do I create a hook for each facet in a for-loop?

[Haroenv]

A widget can not be removed from the tree without also removing its refinement. A workaround is thus to hide with css or skipping the markup from rendering only (still rendering the hook).

How to keep the return value fresh with the newest async results from the Algolia hooks.

The value returned from InstantSearch hooks is always updated on the last search results. If that's not the case, there's a bug we'd love to see a reproduction for

How to handle a dynamic list of facets (determined by the particular page/url). Do I create a hook for each facet in a for-loop?

You can do that, but you can also use DynamicWidgets and define those facets with query rules based on the category for example, although that's delayed with a search request compared to manually maintaining a loop of widgets to render

[avremel]

So the code mostly works. However, I'm running into the following issue:

When I select Refrigerators in the Hierarch Menu, a rule triggers which causes more facets to show up (attributesToRender). Since more facets need data, more hooks need to run which triggers this error Error: Rendered more hooks than during the previous render.

Is there anyway to avoid the error?

export const FacetData = ({ children }) => {
  const { attributesToRender } = useDynamicWidgets()

  const facetData = {}

  let facets = attributesToRender.map((attribute) => FACET[attribute])

  for (const facet of facets) {
    const { attribute, type } = facet

    const actualType = type || 'default'

    let data = null

    if (actualType === 'default') {
      data = useRefinementList({
        limit: 10,
        showMore: true,
        ...facet,
      })
    } else if (actualType === 'ranges') {
      data = useNumericMenu({ ...facet })
    } else if (actualType === 'rating') {
      data = useRatingMenu({ attribute })
    } else if (actualType === 'hierarchy') {
      data = useHierarchicalMenu({ attribute, attributes: facet.attributes })
    }

    facetData[attribute] = { ...facet, data, type: actualType }
  }

  return <FacetContext.Provider value={facetData}>{children}</FacetContext.Provider>
}

[Haroenv]

The right solution there would probably be to render a separate component per attribute to render. Then instead of this "calling the hook another time to get its data", you could also use renderState to access the data in the other widgets. Code would be something like this:

function Facet({ attribute }) {
  const { type = 'default' } = FACET[attribute];
  if (type === 'default') {
    useRefinementList({
      limit: 10,
      showMore: true,
      ...facet,
    });
  } else if (type === 'ranges') {
    useNumericMenu({ ...facet });
  } else if (type === 'rating') {
    useRatingMenu({ attribute });
  } else if (type === 'hierarchy') {
    useHierarchicalMenu({
      attribute,
      attributes: facet.attributes,
    });
  }

  return null;
}

function ExposeRenderState({ children }) {
  const [renderState, setRenderState] = useState({});
  const { use } = useInstantSearch();

  useEffect(() => {
    return use(({ instantSearchInstance }) => ({
      onStateChange() {
        setRenderState(instantSearchInstance.renderState);
      },
    }));
  }, []);

  return (
    <FacetContext.Provider value={renderState}>
      {children}
    </FacetContext.Provider>
  );
}

export function FacetData({ children }) {
  const { attributesToRender } = useDynamicWidgets();

  return (
    <>
      {attributesToRender.map((attribute) => (
        <Facet attribute={attribute} key={attribute} />
      ))}
      <Expose>{children}</Expose>
    </>
  );
}

It's a somewhat different approach, but still allows for only one widget per type to be mounted :)

[avremel]

Thank you, this solution definitely solves the hooks issue.

However, I'm now encountering a new issue with renderState:

instantSearchInstance.renderState seems to always have a stale value (second to last change).
uiState does always have the most recent change, but comes in a different format (just the selected values for a facet, undefined when selection has been removed.

Is there a simple way to get the most resent state change in the shape of renderState?

I tried merging uiState into renderState myself, but the experience hasn't been smooth.

[avremel]

This works!

const ExposeRenderState = ({ children }) => {
  const [renderState, setRenderState] = useState({})
  const { use, uiState } = useInstantSearch()

  useEffect(() => {
    use(({ instantSearchInstance }) => {
      setRenderState(instantSearchInstance.renderState[INSTANT_SEARCH_INDEX_NAME])
    })
  }, [uiState])

  return <RenderStateContext.Provider value={renderState}>{children}</RenderStateContext.Provider>
}

[avremel]

Oops, spoke too soon, renderState is returning incorrect data when clearing category filters. I'll escalate through Algolia support as it will be simpler for me to share code, etc.