title: How to return html tags in useEffect?
body: <p>If i run a <code>console.log(props.lightbox)</code> within the <code>if(props.lightbox)</code> statement i get a true prompt, so why isn't the return statement being passed out?</p>
  <p>The reason why i have 2 different functions, is because i want to do some smooth animation with css. If i run it without it being wrapped in an useEffect method, it works as expected, but i want it to wait 2 seconds before returning the empty div, and not wait at all when returning the <code>lightbox-container</code></p>
  <pre><code>import React, { useEffect } from 'react'
  
  function LightboxContent(props){
      useEffect(() =&gt; {
          const intervalId = setTimeout(() =&gt; {
              if(props.lightbox){
                  return(
                      &lt;div className=&quot;lightbox-container&quot;&gt;
                          &lt;img src={props.pitem.src} alt={props.pitem.title}&gt;&lt;/img&gt;
                              &lt;div className=&quot;lightbox-text&quot;&gt;
                                  &lt;div className=&quot;lightbox-h1&quot;&gt;
                                      &lt;h1&gt;{props.pitem.title}&lt;/h1&gt;
                                      &lt;h2&gt;{'(' + props.pitem.type + ')'}&lt;/h2&gt;
                                  &lt;/div&gt;
                                  &lt;h2&gt;{props.pitem.director ? &quot;Director: &quot; + props.pitem.director : null || props.pitem.production ? &quot;Production: &quot; + props.pitem.production : null}&lt;/h2&gt;
                                  &lt;h2&gt;{&quot;role: &quot; + props.pitem.role}&lt;/h2&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                  )
              } else {
                  return(
                      &lt;div&gt;&lt;/div&gt;
                  )
              }
          }, props.lightbox ? 2000 : 0);
          return () =&gt; clearInterval(intervalId);
      }, [props.lightbox]);      
  }
  
  function Lightbox(props){
      return(
          &lt;div id=&quot;lightbox&quot; className={props.lightbox ? &quot;lightbox-content-container-active&quot; : &quot;&quot;} onClick={() =&gt; props.click()}&gt;
              {LightboxContent(props)}
          &lt;/div&gt;
      )
  }
  </code></pre>