So... I was trying useEffect but I found a strange behavior. I have a state in a dumb ponent. 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?

const ponentToRender=()=>{
    const [renderStatus, changeRenderStatus]=useState(false);
    const [transitionStatus, changeTransitionStatus]=useState(false);
    if(!renderStatus){
        useEffect(()=>{
            window.addEventListener("transitionend",(event)=>{
                if(event.propertyName==="width"){
                    changeTransitionStatus(transitionStatus?false:true);
                }
            })
        })
        changeRenderStatus(true)
    }
    return (transitionStatus)?<div> First case </div>:<div> Second case</div>
}

there's another function with some DOM manipulation onMouseOver.

This function should change the state from the event listener but it doesn't.

So... I was trying useEffect but I found a strange behavior. I have a state in a dumb ponent. 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?

const ponentToRender=()=>{
    const [renderStatus, changeRenderStatus]=useState(false);
    const [transitionStatus, changeTransitionStatus]=useState(false);
    if(!renderStatus){
        useEffect(()=>{
            window.addEventListener("transitionend",(event)=>{
                if(event.propertyName==="width"){
                    changeTransitionStatus(transitionStatus?false:true);
                }
            })
        })
        changeRenderStatus(true)
    }
    return (transitionStatus)?<div> First case </div>:<div> Second case</div>
}

there's another function with some DOM manipulation onMouseOver.

This function should change the state from the event listener but it doesn't.

• javascript
• reactjs
• react-hooks

• please post your releavant code – Shubham Khatri Commented Feb 9, 2019 at 6:54

1 Answer 1

1. you can't use hooks inside a if statement, see hooks-rules
2. you should return a clean up function from your useEffect hooks to remove the event listener and avoid memory leaks
3. you probably want the effect to run only once, so provide an empty array as second argument to useEffect (I don't think you need renderStatus)
4. inside the useEffect, when calling a state setter, prefer the functional form so that you always have a fresh state value.

example

const ponentToRender = () => {
  //const [renderStatus, changeRenderStatus] = useState(false);
  const [transitionStatus, changeTransitionStatus] = useState(false);

  // No condition
  useEffect(() => {
    const handler = (event) => {
      if (event.propertyName === "width") {
        //passe a function to state setter to get fresh state value
        changeTransitionStatus(transitionStatus => transitionStatus ? false : true);
      }
    };

    window.addEventListener("transitionend", handler);

    // clean up
    return () => window.removeEventListener("transitionend", handler);
  }, []); // empty array => run only once

  return (transitionStatus) ? <div> First case </div> : <div> Second case</div>
}