React Hooks

import { DependencyList, MutableRefObject } from 'react';

/**
 * Combines multiple callback refs into a single ref callback
 * @param refs - Variable number of callback refs that accept a node
 * @returns A memoized callback function that calls all provided refs with the same node
 */
function useCombinedRefs<T>(...refs: ((node: T) => void)[]): (node: T) => void;

import React, { useRef, useCallback } from "react";
import { useCombinedRefs } from "@dnd-kit/utilities";

function MyComponent() {
  const myRef = useRef<HTMLDivElement>(null);
  const anotherRef = useCallback((node: HTMLDivElement | null) => {
    if (node) {
      // Do something with the node
      console.log("Element attached:", node);
    }
  }, []);
  
  const combinedRef = useCombinedRefs(myRef, anotherRef);
  
  return <div ref={combinedRef}>Content</div>;
}

/**
 * Creates a stable callback function that always calls the latest handler
 * @param handler - The event handler function to stabilize (can be undefined)
 * @returns A stable callback function that never changes identity
 */
function useEvent<T extends Function>(handler: T | undefined): (...args: any[]) => any;

import React, { useState } from "react";
import { useEvent } from "@dnd-kit/utilities";

function Counter() {
  const [count, setCount] = useState(0);
  
  // This callback will be stable across re-renders
  const handleIncrement = useEvent(() => {
    setCount(count + 1);
  });
  
  return (
    <div>
      <p>Count: {count}</p>
      <ExpensiveChild onIncrement={handleIncrement} />
    </div>
  );
}

/**
 * SSR-safe layout effect hook
 * Resolves to useLayoutEffect on client, useEffect on server
 */
const useIsomorphicLayoutEffect: typeof useLayoutEffect | typeof useEffect;

import React, { useState } from "react";
import { useIsomorphicLayoutEffect } from "@dnd-kit/utilities";

function MeasuredComponent() {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
  
  useIsomorphicLayoutEffect(() => {
    // Safe to use DOM measurements
    const element = document.getElementById("measured");
    if (element) {
      setDimensions({
        width: element.offsetWidth,
        height: element.offsetHeight,
      });
    }
  }, []);
  
  return <div id="measured">Width: {dimensions.width}px</div>;
}

/**
 * Provides controlled interval management with automatic cleanup
 * @returns Tuple containing [set, clear] functions
 */
function useInterval(): readonly [
  (listener: Function, duration: number) => void,
  () => void
];

import React, { useState } from "react";
import { useInterval } from "@dnd-kit/utilities";

function Timer() {
  const [count, setCount] = useState(0);
  const [set, clear] = useInterval();
  
  const startTimer = () => {
    set(() => setCount(c => c + 1), 1000);
  };
  
  const stopTimer = () => {
    clear();
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

/**
 * Stores a value in a ref and updates it when dependencies change
 * @param value - The value to store and keep updated
 * @param dependencies - Optional dependency list (defaults to [value])
 * @returns A ref object containing the latest value
 */
function useLatestValue<T>(
  value: T,
  dependencies?: DependencyList
): MutableRefObject<T>;

import React, { useState, useCallback } from "react";
import { useLatestValue } from "@dnd-kit/utilities";

function AsyncComponent() {
  const [data, setData] = useState("initial");
  const latestData = useLatestValue(data);
  
  const fetchData = useCallback(async () => {
    // This async function can access the latest value
    // even if the component re-renders during the async operation
    const response = await fetch("/api/data");
    const result = await response.text();
    
    // latestData.current always has the most recent value
    console.log("Previous value:", latestData.current);
    setData(result);
  }, []); // No need to include data in dependencies
  
  return (
    <div>
      <p>Data: {data}</p>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
}

/**
 * Memoization hook with access to previous computed value
 * @param callback - Function that receives the previous value and returns the new value
 * @param dependencies - Array of dependencies to watch for changes
 * @returns The memoized value returned by the callback
 */
function useLazyMemo<T>(
  callback: (prevValue: T | undefined) => T,
  dependencies: any[]
): T;

import React, { useState } from "react";
import { useLazyMemo } from "@dnd-kit/utilities";

function AnimationComponent({ targetPosition }: { targetPosition: number }) {
  const animatedPosition = useLazyMemo(
    (prevPosition) => {
      // Gradually move toward target, starting from previous position
      const current = prevPosition ?? 0;
      const diff = targetPosition - current;
      return current + diff * 0.1; // 10% interpolation
    },
    [targetPosition]
  );
  
  return <div style={{ left: animatedPosition }}>Animated Element</div>;
}

/**
 * Manages an HTMLElement ref with optional change detection
 * @param onChange - Optional callback fired when the element changes
 * @returns Tuple containing [ref object, setter function]
 */
function useNodeRef(
  onChange?: (
    newElement: HTMLElement | null,
    previousElement: HTMLElement | null
  ) => void
): readonly [MutableRefObject<HTMLElement | null>, (element: HTMLElement | null) => void];

import React, { useEffect } from "react";
import { useNodeRef } from "@dnd-kit/utilities";

function ObservedComponent() {
  const [nodeRef, setNodeRef] = useNodeRef((newElement, prevElement) => {
    if (newElement) {
      console.log("Element mounted:", newElement);
      // Set up observers, measurements, etc.
    }
    if (prevElement && !newElement) {
      console.log("Element unmounted:", prevElement);
      // Clean up observers
    }
  });
  
  // Use the ref
  return <div ref={nodeRef.current}>Observed content</div>;
}

/**
 * Returns the previous value of a variable
 * @param value - The current value to track
 * @returns The previous value (undefined on first render)
 */
function usePrevious<T>(value: T): T | undefined;

import React, { useState, useEffect } from "react";
import { usePrevious } from "@dnd-kit/utilities";

function ValueTracker({ value }: { value: number }) {
  const previousValue = usePrevious(value);
  
  useEffect(() => {
    if (previousValue !== undefined && previousValue !== value) {
      console.log(`Value changed from ${previousValue} to ${value}`);
    }
  }, [value, previousValue]);
  
  return (
    <div>
      <p>Current: {value}</p>
      <p>Previous: {previousValue ?? "None"}</p>
    </div>
  );
}

/**
 * Generates unique IDs with a given prefix
 * @param prefix - The prefix for the generated ID
 * @param value - Optional explicit value to use instead of generating an ID
 * @returns A unique ID string or the provided value
 */
function useUniqueId(prefix: string, value?: string): string;

import React from "react";
import { useUniqueId } from "@dnd-kit/utilities";

function FormField({ label, value, onChange }: {
  label: string;
  value: string;
  onChange: (value: string) => void;
}) {
  const inputId = useUniqueId("form-field");
  
  return (
    <div>
      <label htmlFor={inputId}>{label}</label>
      <input
        id={inputId}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}