#refs

Reactadvanced

A stable latest-callback ref to kill effect dependency churn

import { useRef, useEffect, useCallback } from "react";

export const useLatestCallback = <Args extends unknown[], R>(callback: (...args: Args) => R) => {
  const callbackRef = useRef(callback);

Wrap a fast-changing callback in a ref so effects can call the latest version without listing it as a dependency and re-firing every render.

Reactadvanced

useImperativeHandle to expose an imperative API via ref

import { useRef, useImperativeHandle, type Ref } from "react";

export type VideoHandle = { play: () => void; pause: () => void; seekTo: (seconds: number) => void };

export const VideoPlayer = ({ src, ref }: { src: string; ref?: Ref<VideoHandle> }) => {

Expose a small, deliberate imperative API (play, pause, seekTo) from a component, instead of leaking raw DOM nodes through a ref.