title: React Hooks - Ref is not available inside useEffect
body: <p>I am using ReactHooks. I am trying to access <code>ref</code> of <code>User</code> component in <code>useEffect</code> function, but I am getting <code>elRef.current</code> value as <code>null</code>, though I passed <code>elRef.current</code> as second argument to <code>useEffect</code>.  I am supposed to get reference to an element, but outside (function body) of <code>useEffect</code>, <code>ref</code> value is available. Why is that ? How can I get <code>elRef.current</code> value inside <code>useEffect</code>?</p>
  <p><strong>code</strong></p>
  <pre><code>import React, { Component, useState, useRef, useEffect } from &quot;react&quot;;
  
  const useFetch = url =&gt; {
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);
  
    useEffect(
      () =&gt; {
        setIsLoading(true);
        fetch(url)
          .then(response =&gt; {
            if (!response.ok) throw Error(response.statusText);
            return response.json();
          })
          .then(json =&gt; {
            setIsLoading(false);
            setData(json.data);
          })
          .catch(error =&gt; {
            setIsLoading(false);
            setError(error);
          });
      },
      [url]
    );
  
    return { data, isLoading, error };
  };
  
  const User = ({ id }) =&gt; {
    const elRef = useRef(null);
    const { data: user } = useFetch(`https://reqres.in/api/users/${id}`);
  
    useEffect(() =&gt; {
      console.log(&quot;ref&quot;, elRef.current);
    }, [elRef.current]);
    if (!user) return null;
    return &lt;div ref={elRef}&gt;{user.first_name + &quot; &quot; + user.last_name}&lt;/div&gt;;
  };
  
  class App extends Component {
    state = {
      userId: 1
    };
  
    handleNextClick = () =&gt; {
      this.setState(prevState =&gt; ({
        userId: prevState.userId + 1
      }));
    };
  
    handlePrevNext = () =&gt; {
      this.setState(prevState =&gt; ({
        userId: prevState.userId - 1
      }));
    };
    render() {
      return (
        &lt;div&gt;
          &lt;button
            onClick={() =&gt; this.handlePrevClick()}
            disabled={this.state.userId === 1}
          &gt;
            Prevoius
          &lt;/button&gt;
          &lt;button onClick={() =&gt; this.handleNextClick()}&gt;Next&lt;/button&gt;
          &lt;User id={this.state.userId} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p><a href="https://codesandbox.io/s/74lrk9o38q" rel="nofollow noreferrer">Codesandbox link</a></p>
  <p>Thanks !</p>