In some cases you may want to conditionally hide your filters in your UI so that limited screen sizes are not overcrowded. This is especially common with mobile layouts.
You may have created a modal for mobile users so that clicking on a filters button presents the user with the filtering options in an overlay. They select their refinement options and then close the filters overlay, but you may notice that the selected refinements are removed.
The reason why this happens is because the refinementList (or any other widget used for facetFiltering) is unmounted from the DOM and therefore InstantSearch loses its state.
To avoid this, you can use a simple conditional statement to set the CSS display to none. This will hide the elements without unmounting them.
When a user clicks Hide Filters in this example CodeSandBox a CSS className "filters_hidden" with display: none is dynamically added. This way the widgets inside the filters div are just hidden from view but never unmounted .