Lazy conditionals and refs

BetterFixedLazyExample.jsx

function BetterFixedLazyExample({ lazyValue }) {
  // Initialize with null value.
  const myRef = useRef(null);
  
  useLayoutEffect(() => {
    console.log(myRef.current); // => HTMLDivElement DOM node
  }, []);
  
  // Make sure the ref setter is not blocked by conditionals.
  return (
    <div ref={myRef}>
      ...
    </div>
  )
}

// Lift the conditional for lazy values up to a parent component.
function BetterFixedLazyExampleContainer() {
  if (lazyValue) {
    return <div />
  }
  
  return <BetterFixedLazyExample />
}

FixedLazyExample.jsx

function FixedLazyExample({ lazyValue }) {
  // Initialize with null value.
  const myRef = useRef(null);
  
  useLayoutEffect(() => {
    console.log(myRef.current); // => HTMLDivElement DOM node
  }, []);
  
  // Make sure the ref setter is not blocked by conditionals.
  return (
    <div ref={myRef}>
      { lazyValue ? <div /> : <div />}
    </div>
  )
}

LazyExample.jsx

function LazyExample({ lazyValue }) {
  // Initialize with null value.
  const myRef = useRef(null);
  
  useLayoutEffect(() => {
    console.log(myRef.current); // => null
  }, []);
  
  // Initial value of `lazyValue` may be false and true on next update.
  // This will block the second return from setting the ref, and make the ref unavailable on first render.
  if (lazyValue) {
    return <div />
  }
  
  return <div ref={myRef} />
}

SyncExample.jsx

function SyncExample() {
  // Initialize with null value.
  const myRef = useRef(null);
  
  // Use useLayoutEffect to get the DOM node from a ref passed to a React element.
  useLayoutEffect(() => {
    console.log(myRef.current); // => HTMLDivElement DOM node
  }, []);
  
  return <div ref={myRef} />
}