title: Which is the correct way to Get & Set data (not state/props) without re-render React component?
body: <p>Let's say I have a <code>&lt;RecursiveTree /&gt;</code> component.</p>
  
  <pre><code>function List({ node }) {
    // I want to add node.id to an visited array for querying.
    if (visited.includes(node.child)) return null; // stop recursion
  
    setVisited([...visited, node.id]) // Add to visited 
  
    return &lt;List node={node.child} /&gt;;
  }
  
  function RecursiveTree({ data }) {
    // state/props causes re-render.
    const [visited, setVisited] = useState([]);
  
    return &lt;List node={data} visited={visited} setVisted={setVisited} /&gt;;
  }
  </code></pre>
  
  <p>I want to add <strong>nodeId</strong> to <code>visited[]</code> (conditionally) when child node render.</p>
  
  <p>How do I add (w/o <code>setVisited</code>). and get <code>visited[]</code> (w/o passing as props)?</p>
  
  <p><strong>Updated:</strong></p>
  
  <p>Ref: <a href="https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables</a></p>