docs(examples): sync InstantSearch query with React state (#3277)

Author: francoischalifour

examples/hooks-ssr/src/components/SearchBox.js

@@ -16,15 +16,27 @@ export function SearchBox(props) {
     setValue(event.currentTarget.value);
   }
 
+  // Track when the value coming from the React state changes to synchronize
+  // it with InstantSearch.
   useEffect(() => {
     if (query !== value) {
       refine(value);
     }
-    // We want to track when the value coming from the React state changes
-    // to update the InstantSearch.js query, so we don't need to track the
-    // InstantSearch.js query.
+    // We don't want to track when the InstantSearch query changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [refine, value]);
+  }, [value, refine]);
+
+  // Track when the InstantSearch query changes to synchronize it with
+  // the React state.
+  useEffect(() => {
+    // We bypass the state update if the input is focused to avoid concurrent
+    // updates when typing.
+    if (document.activeElement !== inputRef.current && query !== value) {
+      setValue(query);
+    }
+    // We don't want to track when the React state value changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
 
   return (
     <ControlledSearchBox

examples/hooks/components/SearchBox.tsx

@@ -18,16 +18,28 @@ export function SearchBox(props: SearchBoxProps) {
     setValue(event.currentTarget.value);
   }
 
+  // Track when the value coming from the React state changes to synchronize
+  // it with InstantSearch.
   useEffect(() => {
     if (query !== value) {
       refine(value);
     }
-    // We want to track when the value coming from the React state changes
-    // to update the InstantSearch.js query, so we don't need to track the
-    // InstantSearch.js query.
+    // We don't want to track when the InstantSearch query changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, refine]);
 
+  // Track when the InstantSearch query changes to synchronize it with
+  // the React state.
+  useEffect(() => {
+    // We bypass the state update if the input is focused to avoid concurrent
+    // updates when typing.
+    if (document.activeElement !== inputRef.current && query !== value) {
+      setValue(query);
+    }
+    // We don't want to track when the React state value changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
+
   return (
     <ControlledSearchBox
       className={props.className}