@o/hooks 0.16.19

package/src/useMemoizedObjectList.ts

@@ -0,0 +1,74 @@
+import { isEqualDeepLite } from '@o/helpers'
+import { useEffect, useMemo, useRef } from 'react'
+
+/**
+ * When zero mutates and inserts, it creates all new objects for everything, but this
+ * breaks react memoization, even when only the last item is mutated, or the last item
+ * is inserted. This hook should be considered temporary, I've brought up the idea with
+ * the zero team to implement this internally, as that would be significantly faster.
+ *
+ * for now, this basically will re-use the last message if JSON.stringify says its the same
+ * that way you skip a lot of re-rendering work when changing long lists of items
+ *
+ * NOTE: this leaks memory
+ */
+export function useMemoizedObjectList<
+  Items extends readonly object[],
+  Item extends Items[0] = Items[0],
+  ItemKey extends keyof Item = keyof Item,
+>(list: Items, identityKey: ItemKey): Items {
+  const memoizedItems = useRef<Record<string, any>>({})
+  const memoizedList = useRef<Items>(list)
+
+  const val = useMemo(() => {
+    let res = list
+    let didFindChange = false
+    const next: Item[] = []
+    const lastItems = memoizedItems.current
+
+    // changed size, always update array identity
+    if (list.length !== memoizedList.current.length) {
+      didFindChange = true
+    }
+
+    for (const item_ of list) {
+      const item = item_ as Item
+      const id = item[identityKey] as any
+      const last = lastItems[id]
+
+      // zero is returning a symbol on objects sometimes?
+      if (!last || !isEqualDeepLite(last, item)) {
+        didFindChange = true
+
+        // if (last) {
+        //   console.info(`did change`, item, 'vs', last)
+        //   for (const key in item) {
+        //     if (!deepEqualLite(item[key], last[key])) {
+        //       console.warn('changed', key)
+        //     }
+        //   }
+        // }
+
+        lastItems[id] = item
+        next.push(item)
+      } else {
+        next.push(last)
+      }
+    }
+
+    // if every item matches we can memoize the entire array
+    if (didFindChange) {
+      res = next as any
+    } else {
+      res = memoizedList.current
+    }
+
+    return res
+  }, [identityKey, list])
+
+  useEffect(() => {
+    memoizedList.current = val
+  }, [val])
+
+  return val
+}

package/src/useThrottle.ts

@@ -0,0 +1,36 @@
+import { useRef } from 'react'
+
+import { useEvent } from './useEvent'
+
+type Timer = ReturnType<typeof setTimeout>
+
+export const useThrottle = <T extends (...args: any[]) => any>(fn: T, delay = 100): T => {
+  const lastCallTime = useRef<number>(0)
+  const timeoutRef = useRef<Timer | null>(null)
+
+  const stableFn = useEvent(fn)
+
+  const throttledFn = useEvent((...args: Parameters<T>) => {
+    const now = Date.now()
+    const timeSinceLastCall = now - lastCallTime.current
+
+    if (timeSinceLastCall >= delay) {
+      // If enough time has passed, call immediately
+      lastCallTime.current = now
+      stableFn(...args)
+    } else {
+      // Otherwise, schedule a call for when the delay period is over
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        lastCallTime.current = Date.now()
+        stableFn(...args)
+        timeoutRef.current = null
+      }, delay - timeSinceLastCall)
+    }
+  }) as T
+
+  return throttledFn
+}

package/src/useWarnIfDepsChange.ts

@@ -0,0 +1,61 @@
+import { getCurrentComponentStack } from '@o/helpers'
+import { useEffect, useId, useRef } from 'react'
+
+export interface UseWarnIfDepsChangeOptions {
+  maxChanges?: number
+  ignoreIndexBefore?: number
+  name: string
+}
+
+export function useWarnIfDepsChange<T extends readonly unknown[]>(
+  deps: T,
+  options: UseWarnIfDepsChangeOptions
+): void {
+  const { maxChanges = 0, name, ignoreIndexBefore = 0 } = options
+
+  const changeCountRef = useRef(0)
+  const prevDepsRef = useRef<T | undefined>(undefined)
+  const id = useId()
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      if (prevDepsRef.current !== undefined) {
+        const changedDeps: Array<{
+          index: number
+          prev: unknown
+          next: unknown
+        }> = []
+
+        const compareDeps = ignoreIndexBefore ? deps.slice(ignoreIndexBefore) : deps
+
+        compareDeps.forEach((dep, indexIn) => {
+          const index = indexIn + ignoreIndexBefore
+
+          if (prevDepsRef.current && prevDepsRef.current[index] !== dep) {
+            changedDeps.push({
+              index,
+              prev: prevDepsRef.current[index],
+              next: dep,
+            })
+          }
+        })
+
+        if (changedDeps.length > 0) {
+          changeCountRef.current++
+
+          if (changeCountRef.current > maxChanges) {
+            // don't use warn because it adds a huge stack
+            console.info(
+              `🔄 useWarnIfDepsChange "${name}" is changing too often! Changed ${changeCountRef.current} times (max: ${maxChanges})`,
+              changedDeps,
+              `\n id (${id}) at:`,
+              getCurrentComponentStack('short')
+            )
+          }
+        }
+      }
+
+      prevDepsRef.current = deps
+    }
+  })
+}

package/src/useWarnIfMemoChangesOften.ts

@@ -0,0 +1,24 @@
+import { emptyFn } from '@o/helpers'
+import { useEffect, useRef } from 'react'
+
+export const useWarnIfMemoChangesOften =
+  process.env.NODE_ENV === 'production'
+    ? (emptyFn as never)
+    : <T>(value: T, threshold = 5, name?: string) => {
+        const countRef = useRef(0)
+        const prevValueRef = useRef<T>(value)
+
+        useEffect(() => {
+          if (prevValueRef.current !== value) {
+            countRef.current++
+            prevValueRef.current = value
+
+            if (countRef.current > threshold) {
+              const warningName = name || 'Memoized value'
+              console.warn(
+                `🔄 ${warningName} is changing too often! Changed ${countRef.current} times (threshold: ${threshold})`
+              )
+            }
+          }
+        }, [value, threshold, name])
+      }