title: In React what's the best way to render a Component differently the first time it appears on the page?
body: <p>I have some React Components that are going to be used a lot all over my App.</p>
  <p>I'd like that only the first time they get printed in the DOM, they return as</p>
  <p><code>&lt;symbol id=&quot;SVGComponent&quot;&gt;&lt;SVGComponent&gt;&lt;/symbol&gt;&lt;use href=&quot;#SVGComponent&quot; /&gt;</code></p>
  <p>while every other following printing should be only
  <code>&lt;use href=&quot;#SVGComponent&quot; /&gt;</code> since the symbol has already been declared in the page</p>
  <pre><code>const [firstTime, setFirstTime] = useState(true);
  
  useEffect(() =&gt; { setFirstTime(false) }, []);
  </code></pre>
  <pre><code>if (firstTime) {
      return (&lt;symbol id=&quot;Component&quot;&gt;&lt;Path /&gt;&lt;/symbol&gt;);
  }
  else {
      return(&lt;use href=&quot;#Component&quot;/&gt;);
  }
  </code></pre>
  <p>This is my code so far but the condition always return <code>false</code>.</p>
  <p>How is that possibile in React with <code>useEffect</code>?
  Thanks in advance for your help</p>