title: React Hooks - How to target an element child (with useRef) with a variable declaration outside of useEffect?
body: <p>I'm experimenting with React Hooks and I'm wondering how to target elements children with useRef. Actually, I know how to target an element with useRef. But I meet some problems when I'm trying to assign children to a variable. </p>
  
  <p>Here's an example :</p>
  
  <pre><code>import React, { useState, useEffect, useRef } from "react";
  import "./styles.css";
  
  export default function App() {
    let containerRef = useRef(null);
  
    let title, subtitle;
  
    const myEvent = () =&gt; {
      console.log(title);
    };
  
    useEffect(() =&gt; {
      title = containerRef.children[0];
      subtitle = containerRef.children[1];
    }, []);
  
    return (
      &lt;div className="App" ref={el =&gt; (containerRef = el)}&gt;
        &lt;h1 onClick={myEvent}&gt;Hello World!&lt;/h1&gt;
        &lt;h2&gt;What's going on ?&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  
  <p>I would like to access to the title and subtitle variables to create a function <strong>outside of useEffect</strong>. I know I'm wrong about the first declaration of <em>title</em> and <em>subtitle</em>. But actually I don't know how to fix this. I tried to use <strong>useState</strong>, but I failed to resolve my problem.</p>
  
  <p>(Precisions : of course, in my real project, I just don't want display the variable in the console).</p>
  
  <p>Can someone help me to fix this ?</p>