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.
import { useOptimistic, useTransition } from "react";
type Post = { id: string; likedByMe: boolean; likeCount: number };
export const LikeButton = ({ post, toggleLike }: { post: Post; toggleLike: (id: string) => Promise<void> }) => {Show the result of an action immediately and let React reconcile it with the real state once the server responds, success or failure.
import { useId } from "react";
export const PasswordField = () => {
const id = useId();
Generate ids that match between server and client render, so aria-describedby and label associations survive hydration without a mismatch.
import { useState, useEffect } from "react";
export const useDebouncedValue = <T,>(value: T, delayMs: number): T => {
const [debounced, setDebounced] = useState(value);
Debounce a fast-changing value, like search input, without redefining a timer effect in every component that needs one.
type State =
| { status: "idle" }
| { status: "loading" }
| { status: "success"; data: string[] }
| { status: "error"; error: string };Model a fetch state machine as a discriminated union so an exhaustiveness check fails to compile the moment a reducer case is missing.
import { useRef, useState, useLayoutEffect } from "react";
export const Tooltip = ({ text }: { text: string }) => {
const [height, setHeight] = useState(0);
const ref = useRef<HTMLDivElement>(null);Use useLayoutEffect to measure a DOM node and apply the result before the browser paints, avoiding the flicker useEffect leaves behind.
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.
import { useState, useTransition } from "react";
export const FilterableList = ({ items }: { items: string[] }) => {
const [text, setText] = useState("");
const [visible, setVisible] = useState(items);Mark an expensive state update as a transition so React keeps typing responsive and only shows the update once it is ready.
import { useState, useDeferredValue, useMemo } from "react";
const filterItems = (items: string[], query: string) =>
items.filter((item) => item.toLowerCase().includes(query.toLowerCase()));
Defer expensive list re-renders behind fast keystrokes with useDeferredValue, and show a stale-content hint while it catches up.
import { useSyncExternalStore } from "react";
const EVENTS = ["online", "offline"] as const;
const subscribe = (onStoreChange: () => void) => {Subscribe a component to state that lives outside React, like navigator.onLine, without ever showing a torn snapshot mid-render.