UNPKG

754 BTypeScriptView Raw
1/**
2 * A convenience hook around `useState` designed to be paired with
3 * the component [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) api.
4 * Callback refs are useful over `useRef()` when you need to respond to the ref being set
5 * instead of lazily accessing it in an effect.
6 *
7 * ```ts
8 * const [element, attachRef] = useCallbackRef<HTMLDivElement>()
9 *
10 * useEffect(() => {
11 * if (!element) return
12 *
13 * const calendar = new FullCalendar.Calendar(element)
14 *
15 * return () => {
16 * calendar.destroy()
17 * }
18 * }, [element])
19 *
20 * return <div ref={attachRef} />
21 * ```
22 *
23 * @category refs
24 */
25export default function useCallbackRef<TValue = unknown>(): [
26 TValue | null,
27 (ref: TValue | null) => void
28];