title: How correctly pass a node from a ref to a context?
body: <p>I'm trying to pass a node from a ref to a context. But because I have no re-render after the first render, the passed node is <code>null</code>. I thought about two variants (but I think they aren't the best):</p>
  
  <ol>
  <li><p>To pass <code>ref</code> instead of <code>ref.current</code>. But then in use cases, I'll be forced to use something like <code>contextRef.current</code> instead of <code>contextNode</code>.</p></li>
  <li><p>Use a state (something like <code>firstRender</code>) to re-render a component after getting a <code>ref.current</code>. This seems not optimal.</p></li>
  </ol>
  
  <p>What is a correct (the best?) way to do it?</p>
  
  <p><a href="https://codesandbox.io/embed/fast-paper-6vm32" rel="noreferrer">CodeSandbox</a></p>
  
  <pre><code>import React, { createContext, createRef, useContext, useEffect } from "react";
  import ReactDOM from "react-dom";
  
  const Context = createContext(null);
  
  const App = ({ children }) =&gt; {
    const ref = createRef();
  
    return (
      &lt;div ref={ref}&gt;
        &lt;Context.Provider value={ref.current}&gt;{children}&lt;/Context.Provider&gt;
      &lt;/div&gt;
    );
  };
  
  const Child = () =&gt; {
    const contextNode = useContext(Context);
  
    useEffect(() =&gt; {
      console.log(contextNode);
    });
  
    return &lt;div /&gt;;
  };
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(
    &lt;App&gt;
      &lt;Child /&gt;
    &lt;/App&gt;,
    rootElement
  );
  </code></pre>