New hooks: useCallbackConst, useCallbackRef, and useValueRef

README.md

@@ -22,6 +22,8 @@ npm install usable-react
 ## Documentation
 
 - [`useAsyncEffect`](./docs/use-async-effect.md)
+- [`useCallbackConst`](./docs/use-callback-const.md)
+- [`useCallbackRef`](./docs/use-callback-ref.md)
 - [`useClickOutside`](./docs/use-click-outside.md)
 - [`useClipboard`](./docs/use-clipboard.md)
 - [`useCompare`](./docs/use-compare.md)
@@ -46,4 +48,5 @@ npm install usable-react
 - [`usePrevious`](./docs/use-previous.md)
 - [`useResizeObserver`](./docs/use-resize-observer.md)
 - [`useTimer`](./docs/use-timer.md)
+- [`useValueRef`](./docs/use-value-ref.md)
 

docs/use-callback-const.md

@@ -0,0 +1,3 @@
+# `useCallbackConst`
+
+Documentation coming soon...

docs/use-callback-ref.md

@@ -0,0 +1,3 @@
+# `useCallbackRef`
+
+Documentation coming soon...

docs/use-value-ref.md

@@ -0,0 +1,3 @@
+# `useValueRef`
+
+Documentation coming soon...

src/hooks/use-callback-const/index.ts

@@ -0,0 +1,8 @@
+import { useConst } from '../use-const';
+
+/**
+ * Creates a callback with a constant value over the lifecycle of a component.
+ */
+export function useCallbackConst<T extends (...args: any[]) => any>(callback: T): T {
+  return useConst<T>(() => callback);
+}

src/hooks/use-callback-ref/index.ts

@@ -0,0 +1,13 @@
+import { useCallbackConst } from '../use-callback-const';
+import { useValueRef } from '../use-value-ref';
+
+/**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency.
+ *
+ * Returns a new callback with a constant value over the lifecycle of a component.
+ */
+export function useCallbackRef<T extends (...args: any[]) => any>(callback?: T): T {
+  const callbackRef = useValueRef(callback);
+  return useCallbackConst(((...args) => callbackRef.current?.(...args)) as T);
+}

src/hooks/use-const/index.ts

@@ -8,9 +8,12 @@ import { useRef } from 'react';
  * @see the LICENSE file at the root of this source tree:
  *   https://github.com/chakra-ui/chakra-ui/blob/6e259a1f7008a00f7be096e6b315cb9d62ef9748/packages/hooks/src/use-const.ts
  *
- * Modifications from original source: none
+ * Modifications from original source:
+ *   - TypeScript improvements using overload definitions
  */
-export function useConst<T>(init: T | (() => T)): T {
+export function useConst<T>(init: T | (() => T)): T;
+export function useConst<T = undefined>(): T | undefined;
+export function useConst<T>(init?: T | (() => T)): T | undefined {
   // `useRef` is less expensive than `useState`.
   const ref = useRef<T | null>(null);
 
@@ -20,10 +23,3 @@ export function useConst<T>(init: T | (() => T)): T {
 
   return ref.current as T;
 }
-
-/**
- * Creates a callback with a constant value over the lifecycle of a component.
- */
-export function useCallbackConst<T extends (...args: any[]) => any>(callback: T): T {
-  return useConst<T>(() => callback);
-}

src/hooks/use-dom-event-listeners/index.ts

@@ -4,7 +4,7 @@
 import { MutableRefObject, RefObject, useEffect, useRef } from 'react';
 
 import { isDocument, isElement, isRefObject, isWindow } from '../../utils/instance-of';
-import { useCallbackConst } from '../use-const';
+import { useCallbackConst } from '../use-callback-const';
 
 export interface AddEventListenerFunction<
   T extends HTMLElement | Window | Document,

src/hooks/use-intersection-observer/index.ts

@@ -1,7 +1,7 @@
 import { DependencyList, useEffect, useRef, useState } from 'react';
 
 import { ElementOrRef, resolveElement } from '../../utils/element-refs';
-import { useCallbackConst } from '../use-const';
+import { useCallbackConst } from '../use-callback-const';
 import { useIsMounted } from '../use-is-mounted';
 
 function hasIntersectionObserver() {

src/hooks/use-interval/index.ts

@@ -1,6 +1,6 @@
 import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
 
-import { useCallbackConst } from '../use-const';
+import { useCallbackConst } from '../use-callback-const';
 import { useEffectTrigger } from '../use-effect-trigger';
 import { useInitialRender } from '../use-initial-render';
 

src/hooks/use-is-mounted/index.ts

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import { useCallbackConst } from '../use-const';
+import { useCallbackConst } from '../use-callback-const';
 import { useEffectOnce } from '../use-effect-once';
 
 /**

src/hooks/use-measurement/index.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 
 import { ReactRef } from '../../utils/element-refs';
-import { useCallbackConst } from '../use-const';
+import { useCallbackConst } from '../use-callback-const';
 import { useIsomorphicLayoutEffect } from '../use-isomorphic-layout-effect';
 import { useResizeObserver } from '../use-resize-observer';
 

src/hooks/use-timer/index.ts

@@ -1,7 +1,7 @@
 import { DependencyList, EffectCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 
+import { useCallbackConst } from '../use-callback-const';
 import { useCompare } from '../use-compare';
-import { useCallbackConst } from '../use-const';
 
 export interface TimerHook {
   /**

src/hooks/use-value-ref/index.ts

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Converts `value` to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency.
+ *
+ * Returns a ref object with a constant value over the lifecycle of a component.
+ */
+export function useValueRef<T>(value: T) {
+  const valueRef = useRef(value);
+
+  useEffect(() => {
+    valueRef.current = value;
+  });
+
+  return valueRef;
+}

src/index.ts

@@ -1,4 +1,6 @@
 export * from './hooks/use-async-effect';
+export * from './hooks/use-callback-const';
+export * from './hooks/use-callback-ref';
 export * from './hooks/use-click-outside';
 export * from './hooks/use-clipboard';
 export * from './hooks/use-compare';
@@ -23,3 +25,4 @@ export * from './hooks/use-microtask-effect';
 export * from './hooks/use-previous';
 export * from './hooks/use-resize-observer';
 export * from './hooks/use-timer';
+export * from './hooks/use-value-ref';