Change usePrevious to sync, without any effects

Author: eknkc

packages/react-querybuilder/src/hooks/useControlledOrUncontrolled.ts

@@ -10,7 +10,6 @@ import { usePrevious } from './usePrevious';
 export interface UseControlledOrUncontrolledParams {
   defaultQuery?: RuleGroupTypeAny;
   queryProp?: RuleGroupTypeAny;
-  isFirstRender: boolean;
 }
 
 let didWarnBothQueryDefaultQuery = false;
@@ -24,9 +23,8 @@ let didWarnControlledToUncontrolled = false;
 export const useControlledOrUncontrolled = ({
   defaultQuery,
   queryProp,
-  isFirstRender,
 }: UseControlledOrUncontrolledParams) => {
-  const prevQueryPresent = usePrevious(!!queryProp);
+  const prevQueryPresent = usePrevious(!!queryProp) !== false;
 
   useEffect(() => {
     // istanbul ignore else
@@ -43,7 +41,7 @@ export const useControlledOrUncontrolled = ({
         console.error(errorControlledToUncontrolled);
         didWarnControlledToUncontrolled = true;
       } else if (
-        !(prevQueryPresent || isFirstRender) &&
+        !prevQueryPresent &&
         !!queryProp &&
         !defaultQuery &&
         !didWarnUncontrolledToControlled
@@ -52,5 +50,5 @@ export const useControlledOrUncontrolled = ({
         didWarnUncontrolledToControlled = true;
       }
     }
-  }, [defaultQuery, prevQueryPresent, queryProp, isFirstRender]);
+  }, [defaultQuery, prevQueryPresent, queryProp]);
 };

packages/react-querybuilder/src/hooks/usePrevious.ts

@@ -1,16 +1,24 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 /**
  * Returns the prop value from the last render.
  *
  * Adapted from https://usehooks.com/usePrevious/.
  */
 export const usePrevious = <T>(value: T) => {
-  const ref = useRef<T | null>(null);
+  const ref = useRef<{ value: T | null; prev: T | null }>({
+    value: value,
+    prev: null,
+  });
 
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
+  const current = ref.current.value;
 
-  return ref.current;
+  if (value !== current) {
+    ref.current = {
+      value: value,
+      prev: current,
+    };
+  }
+
+  return ref.current.prev;
 };

packages/react-querybuilder/src/hooks/useQueryBuilderSetup.ts

@@ -51,7 +51,6 @@ export const useQueryBuilderSetup = <
   type OperatorName = GetOptionIdentifierType<O>;
 
   const qbId = useRef(generateID());
-  const firstRender = useRef(true);
 
   const {
     query: queryProp,
@@ -419,13 +418,8 @@ export const useQueryBuilderSetup = <
   useControlledOrUncontrolled({
     defaultQuery,
     queryProp,
-    isFirstRender: firstRender.current,
   });
 
-  if (firstRender.current) {
-    firstRender.current = false;
-  }
-
   return {
     qbId: qbId.current,
     rqbContext,