A simple custom hook to get element's ref.

useElement.js

/**
 * A simple custom hook to get element's ref.
 * @example
 *   import { useElement } from "./useElement";
 *
 *   export function Test() {
 *     const [ref, element] = useElement();
 *
 *     return (
 *         <div ref={ref}>Test {element && element.getBoundingClientRect().width}</div>
 *     );
 *   }
 */
import { useState, useCallback } from "react";

export function useElement() {
  const [element, setElement] = useState(null);

  const ref = useCallback((node) => {
    setElement(node);
  }, []);

  return [ref, element];
}