title: React hooks vs eventListener
body: <p>So... I was trying useEffect but I found a strange behavior.
  I have a state in a dumb component. 
  I call useEffect and inside of it I add a new eventListener. 
  This event listener has to change the state given a condition. 
  Problem is the state never changes... 
  Ideas? </p>
  
  <pre><code>const componentToRender=()=&gt;{
      const [renderStatus, changeRenderStatus]=useState(false);
      const [transitionStatus, changeTransitionStatus]=useState(false);
      if(!renderStatus){
          useEffect(()=&gt;{
              window.addEventListener("transitionend",(event)=&gt;{
                  if(event.propertyName==="width"){
                      changeTransitionStatus(transitionStatus?false:true);
                  }
              })
          })
          changeRenderStatus(true)
      }
      return (transitionStatus)?&lt;div&gt; First case &lt;/div&gt;:&lt;div&gt; Second case&lt;/div&gt;
  }
  </code></pre>
  
  <p>there's another function with some DOM manipulation onMouseOver.</p>
  
  <p>This function should change the state from the event listener but it doesn't.</p>