In React, how can I get the value of Element's attribute using Ref?

Question

I want to do

function MyComponent () {

    const myRef = useRef(null)

    const myValue = useMemo(() => (myRef.current.someKey), [])

    return <div ref={myRef} />
}

But it doesn't work because sometimes myRef is not loaded yet when setting myValue (so myRef.current is null), and I have no idea what should I do to reset myValue when the loading is done.

Answer 1

function MyComponent() {
  const [myValue, setMyValue] = useState("Loading...");
  const myRef = useRef(null);

  useEffect(() => {
    setMyValue(myRef?.current.dataset.value);
  }, [myRef]);

  return (
    <div ref={myRef} data-value="foo">
      {myValue}
    </div>
  );
}