@take-out/hooks 0.0.28

package/src/useEffectOnceGlobally.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+
+const executedKeys = new Set<string>()
+
+type WithId = { id: string }
+
+type KeyType<T> = string | string[] | WithId | WithId[] | readonly WithId[] | undefined
+
+/**
+ * Hook that ensures an effect only runs once globally across all component instances
+ * Uses a key (or array of keys) to determine if the effect has already been executed
+ */
+export function useEffectOnceGlobally<T extends KeyType<T>>(
+  key: T,
+  callback: T extends undefined ? () => void : (value: NonNullable<T>) => void
+) {
+  const keyString = !key
+    ? undefined
+    : typeof key === 'string'
+      ? key
+      : Array.isArray(key)
+        ? typeof key[0] === 'string'
+          ? (key as string[]).sort().join('')
+          : (key as readonly WithId[])
+              .map((item) => item.id)
+              .sort()
+              .join('')
+        : (key as WithId).id
+
+  useEffect(() => {
+    if (!keyString || executedKeys.has(keyString)) {
+      return
+    }
+    executedKeys.add(keyString)
+    if (key !== undefined) {
+      ;(callback as (value: NonNullable<T>) => void)(key as NonNullable<T>)
+    } else {
+      ;(callback as () => void)()
+    }
+  }, [keyString, callback, key])
+}

package/src/useIsMounted.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react'
+
+export const useIsMounted = () => {
+  const [state, setState] = useState(false)
+
+  useEffect(() => {
+    setState(true)
+  }, [])
+
+  return state
+}

package/src/useLastValue.ts

@@ -0,0 +1,5 @@
+import { useLastValueIf } from './useLastValueIf'
+
+export function useLastValue<T>(value: T): T | undefined {
+  return useLastValueIf(value, true)
+}

package/src/useLastValueIf.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react'
+
+export function useLastValueIf<T>(value: T, keepLast = true): T | undefined {
+  // sorted [newest, older]
+  const lastTwoValuesRef = useRef<(T | undefined)[]>([])
+
+  const [latest] = lastTwoValuesRef.current
+  if (keepLast) {
+    if (latest !== value) {
+      lastTwoValuesRef.current = [value, latest]
+    }
+  }
+
+  return lastTwoValuesRef.current[1]
+}

package/src/useMemoStable.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react'
+import { useWarnIfDepsChange } from './useWarnIfDepsChange'
+
+// create a useMemo that can log when it changes too often
+// useful for development
+
+export interface UseMemoStableOptions {
+  maxChanges?: number
+  ignoreIndexBefore?: number
+  name: string
+}
+
+export function useMemoStable<Value, T extends readonly unknown[]>(
+  getValue: () => Value,
+  deps: T,
+  options: UseMemoStableOptions = {
+    name: `(untitled)`,
+  }
+): Value {
+  useWarnIfDepsChange(deps, options)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: ignore
+  return useMemo(getValue, deps)
+}

package/src/useMemoizedObjectList.ts

@@ -0,0 +1,74 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { isEqualDeepLite } from '@take-out/helpers'
+
+/**
+ * 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 = []
+    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,35 @@
+import { useRef } from 'react'
+import { useEvent } from 'tamagui'
+
+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 { useEffect, useId, useRef } from 'react'
+import { getCurrentComponentStack } from '@take-out/helpers'
+
+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 { useEffect, useRef } from 'react'
+import { emptyFn } from '@take-out/helpers'
+
+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])
+      }