miolo-react 3.0.0-beta.167 → 3.0.0-beta.169

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "miolo-react",
-  "version": "3.0.0-beta.167",
+  "version": "3.0.0-beta.169",
   "description": "React utils for miolo",
   "author": "Donato Lorenzo <donato@afialapis.com>",
   "contributors": [

package/src/ssr/usePropsCheck.mjs

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react"
+
+export default function usePropsCheck(loader, effect, modifier) {
+  const prevLoader = useRef(loader)
+  const prevEffect = useRef(effect)
+  const prevModifier = useRef(modifier)
+  const loaderChangeCount = useRef(0)
+  const effectChangeCount = useRef(0)
+  const modifierChangeCount = useRef(0)
+  const loaderChangeTime = useRef(0)
+  const effectChangeTime = useRef(0)
+  const modifierChangeTime = useRef(0)
+
+  useEffect(() => {
+    if (prevLoader.current !== undefined && prevLoader.current !== loader) {
+      const now = Date.now()
+      // Si el cambio ocurrió rápido (<100ms desde el último cambio), sumamos al contador continuo
+      if (now - loaderChangeTime.current < 100) {
+        loaderChangeCount.current += 1
+        if (loaderChangeCount.current >= 4) {
+          console.warn(
+            "🚨 [miolo][useSsrDataOrReload]: 'options.loader' varies too frequently. Wrap it in a useCallback!"
+          )
+        }
+      } else {
+        // Ha pasado suficiente tiempo como para ser un cambio humano/aislado
+        loaderChangeCount.current = 1
+      }
+      loaderChangeTime.current = now
+    }
+    prevLoader.current = loader
+  }) // Evalúa en cada render
+
+  useEffect(() => {
+    if (prevEffect.current !== undefined && prevEffect.current !== effect) {
+      const now = Date.now()
+      if (now - effectChangeTime.current < 100) {
+        effectChangeCount.current += 1
+        if (effectChangeCount.current >= 4) {
+          console.warn(
+            "🚨 [miolo][useSsrDataOrReload]: 'options.effect' varies too frequently. Wrap it in a useMemo or useCallback!"
+          )
+        }
+      } else {
+        effectChangeCount.current = 1
+      }
+      effectChangeTime.current = now
+    }
+    prevEffect.current = effect
+  }) // Evalúa en cada render
+
+  useEffect(() => {
+    if (prevModifier.current !== undefined && prevModifier.current !== modifier) {
+      const now = Date.now()
+      if (now - modifierChangeTime.current < 100) {
+        modifierChangeCount.current += 1
+        if (modifierChangeCount.current >= 4) {
+          console.warn(
+            "🚨 [miolo][useSsrDataOrReload]: 'options.modifier' varies too frequently. Wrap it in a useCallback!"
+          )
+        }
+      } else {
+        modifierChangeCount.current = 1
+      }
+      modifierChangeTime.current = now
+    }
+    prevModifier.current = modifier
+  }) // Evalúa en cada render
+}

package/src/ssr/useSsrDataOrReload.mjs

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import getSsrDataFromContext from "./getSsrDataFromContext.mjs"
+import usePropsCheck from "./usePropsCheck.mjs"
 
 const useSsrDataOrReload = (context, miolo, name, options) => {
   const { fetcher } = miolo
@@ -13,7 +14,9 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     model = undefined
   } = options
 
-  const _parseData = useCallback(
+  usePropsCheck(loader, effect, modifier)
+
+  const parseData = useCallback(
     (value) => {
       let parsed = value
       if (model !== undefined) {
@@ -27,58 +30,74 @@ const useSsrDataOrReload = (context, miolo, name, options) => {
     [modifier, model]
   )
 
-  const ssrDataFromContext = getSsrDataFromContext(context, name)
+  const ssrDataFromContext = useMemo(() => {
+    return getSsrDataFromContext(context, name)
+  }, [context, name])
+
   const [ssrData, setSsrData] = useState(
-    _parseData(ssrDataFromContext !== undefined ? ssrDataFromContext : defval)
+    parseData(ssrDataFromContext !== undefined ? ssrDataFromContext : defval)
   )
 
-  const [needToRefresh, setNeedToRefresh] = useState(ssrDataFromContext === undefined)
-  const [status, setStatus] = useState(needToRefresh ? "idle" : "loaded")
+  const [status, setStatus] = useState(ssrDataFromContext !== undefined ? "loaded" : "idle")
   const [error, setError] = useState(undefined)
 
+  const updateSsrData = useCallback(
+    (data) => {
+      setStatus("loading")
+      setSsrData(parseData(data))
+      setStatus("loaded")
+      setError(undefined)
+    },
+    [parseData]
+  )
+
   const refreshSsrData = useCallback(async () => {
+    if (status === "loading") {
+      return
+    }
+
     setStatus("loading")
+    setError(undefined)
+
     if (loader !== undefined) {
       const nSsrData = await loader(context, fetcher)
-      setSsrData(_parseData(nSsrData))
-      setStatus("loaded")
-      setError(undefined)
+      setSsrData(parseData(nSsrData))
     } else {
       if (!url) {
         setError(`No url provided for ${name}`)
       } else {
         const resp = await fetcher.get(url, params)
         if (resp.ok) {
-          setSsrData(_parseData(resp?.data))
-          setStatus("loaded")
-          setError(undefined)
+          setSsrData(parseData(resp?.data))
         } else {
           setError(resp?.error || "Unknonwn error")
-          setStatus("loaded")
         }
       }
     }
-  }, [context, fetcher, loader, url, params, _parseData, name])
+    setStatus("loaded")
+  }, [status, context, fetcher, loader, url, params, parseData, name])
 
   useEffect(() => {
     try {
-      if (needToRefresh) {
-        const changed = effect === undefined || effect.check()
-        if (changed) {
-          setNeedToRefresh(false)
+      if (status === "idle") {
+        const changed =
+          effect === undefined ||
+          (typeof effect === "function" && effect() === true) ||
+          effect === true
+        if (changed === true) {
           refreshSsrData()
         }
       }
     } catch (_) {}
-  }, [needToRefresh, refreshSsrData, effect, ...(effect?.deps || [])])
+  }, [status, refreshSsrData, effect])
 
   return {
     data: ssrData,
-    setData: (data) => setSsrData(_parseData(data)),
+    setData: updateSsrData,
     refresh: refreshSsrData,
     error,
     ok: error === undefined,
-    ready: status === "loaded" || status === "error"
+    ready: status === "loaded"
   }
 }