fix(responsive): infinite loop when computing props

abelflopes · Jul 25, 2024 · fc0b6d6 · fc0b6d6
1 parent 304128a
commit fc0b6d6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 21 deletions.
diff --git a/packages/components/responsive/src/hooks/breakpoints.ts b/packages/components/responsive/src/hooks/breakpoints.ts
@@ -9,7 +9,7 @@ import { eachBreakpoint } from "../utils";
  * @returns @see {@link UseResponsiveData}
  */
 export const useBreakpoints = (
-  active: boolean,
+  active: boolean, // TODO: enable activating for specific breakpoints
   target: ResponsiveTarget = "viewport",
 ): {
   breakpointsData: EnabledBreakpointsMapping;
@@ -97,16 +97,6 @@ export const useBreakpoints = (
     };
   }, [active, target]);
 
-  useEffect(() => {
-    // eslint-disable-next-line no-console -- temp debug / TODO: remove
-    console.log("useBreakpoints: breakpointsData", breakpointsData);
-  }, [breakpointsData]);
-
-  useEffect(() => {
-    // eslint-disable-next-line no-console -- temp debug / TODO: remove
-    console.log("useBreakpoints: activeBreakpoint", activeBreakpoint);
-  }, [activeBreakpoint]);
-
   return useMemo(
     () => ({
       breakpointsData,

diff --git a/packages/components/responsive/src/hooks/responsive-props.ts b/packages/components/responsive/src/hooks/responsive-props.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { type BaseProps, type ResponsiveProps } from "../types";
 import { useBreakpoints } from "./breakpoints";
 import { eachBreakpoint } from "../utils";
@@ -14,13 +14,10 @@ export const useResponsiveProps = <T extends BaseProps>({
   const { target, ...responsiveProps } = responsive ?? {};
   const active = useMemo(() => Boolean(responsive), [responsive]);
   const { breakpointsData } = useBreakpoints(active, target);
-  const [computedProps, setComputedProps] = useState<T>(baseProps);
 
-  useEffect(() => {
-    if (!active) {
-      setComputedProps(baseProps);
-      return;
-    }
+  return useMemo<T>(() => {
+    // use default props when not active
+    if (!active) return baseProps;
 
     let tmpProps: T = baseProps;
 
@@ -36,8 +33,6 @@ export const useResponsiveProps = <T extends BaseProps>({
       };
     });
 
-    setComputedProps(tmpProps);
+    return tmpProps;
   }, [breakpointsData, baseProps, active, responsiveProps]);
-
-  return computedProps;
 };