| 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 | */
|
| 25 | export default function useCallbackRef<TValue = unknown>(): [
|
| 26 | TValue | null,
|
| 27 | (ref: TValue | null) => void
|
| 28 | ];
|