title: React hook useLayoutEffect not updating ref parameter on initial render
body: <p>I'm trying to run a function to check the contrast of any DOM node against its background, passing a reference to the node itself as an argument. But on the initial render, the ref value stays <code>null</code>, I don't understand why.</p>
  
  <p>I understand using <code>useLayoutEffect</code> instead of <code>useEffect</code> should fire synchronously. Also, maybe the issue is with the ref itself, but shouldn't the <code>useRef</code> do the trick?</p>
  
  <p><a href="https://codesandbox.io/s/981x0w06lr" rel="noreferrer">Here's a sandbox with the full code</a>. </p>
  
  <p>This is the component part:</p>
  
  <pre><code>function App() {
    const ref = useRef(null);
    const contrast = useContrast(ref);
  
    return (
      &lt;div className="App"&gt;
        &lt;h1 ref={ref}&gt;Contrast: {contrast}&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>And the custom hook part:</p>
  
  <pre><code>export default function useContrast(ref) {
    const [contrast, setContrast] = useState("");
  
    if (!!ref.current) {
      useLayoutEffect(() =&gt; {
        const contrast = contrastValidation(
          getForegroundColor(ref.current),
          getBackgroundColor(ref.current)
        );
  
        setContrast(contrast);
      });
      return ref.current;
    }
  
    return contrast;
  }
  </code></pre>
  
  <p>It should display some contrast value here: <code>&lt;h1 ref={ref}&gt;Contrast: {contrast}&lt;/h1&gt;</code>, but all I get stays <code>null</code> (as it is defined by default with the <code>useRef</code>).</p>