import { useState, useEffect } from "react";
export const useLocalStorage = <T>(key: string, initialValue: T) => {
const [value, setValue] = useState<T>(() => {
const stored = localStorage.getItem(key);Sync a single piece of state to localStorage with a small, focused hook.
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 { 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.