fix(react-instantsearch): use → addMiddlewares (#464)

Author: dhayab

react-instantsearch/facet-dropdown/src/components/FacetDropdown.tsx

@@ -59,10 +59,10 @@ function DropdownMiddleware({
   closeOnChange,
   close,
 }: MiddlewareProps) {
-  const { use } = useInstantSearch();
+  const { addMiddlewares } = useInstantSearch();
 
   useEffect(() =>
-    use(() => ({
+    addMiddlewares(() => ({
       onStateChange() {
         const shouldCloseOnChange =
           closeOnChange === true ||

react-instantsearch/remix/components/ScrollTo.tsx

@@ -7,11 +7,11 @@ type ScrollToProps = ComponentProps<'div'> & {
 };
 
 export function ScrollTo({ children, ...props }: ScrollToProps) {
-  const { use } = useInstantSearch();
+  const { addMiddlewares } = useInstantSearch();
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    return use(() => {
+    return addMiddlewares(() => {
       return {
         onStateChange() {
           const isFiltering = document.body.classList.contains('filtering');
@@ -27,7 +27,7 @@ export function ScrollTo({ children, ...props }: ScrollToProps) {
         },
       };
     });
-  }, [use]);
+  }, [addMiddlewares]);
 
   return (
     <div {...props} ref={containerRef}>

react-instantsearch/remix/components/SearchErrorToast.tsx

@@ -3,11 +3,11 @@ import * as Toast from '@radix-ui/react-toast';
 import { useInstantSearch } from 'react-instantsearch';
 
 export function SearchErrorToast() {
-  const { use } = useInstantSearch();
+  const { addMiddlewares } = useInstantSearch();
   const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
-    return use(({ instantSearchInstance }) => {
+    return addMiddlewares(({ instantSearchInstance }) => {
       function handleError(searchError: Error) {
         setError(searchError);
       }
@@ -21,7 +21,7 @@ export function SearchErrorToast() {
         },
       };
     });
-  }, [use]);
+  }, [addMiddlewares]);
 
   if (!error) {
     return null;