useEffect does not go to if statements

Question

Do not actually understand why this code part not working as it should. This useEffect block re-renders on every scrollY position. Also, I see that this code part: console.log(wrapperRef.current.style.opacity); should call if and else if statements, but it does not.

Here is the code:

  useEffect(() => {
    console.log(wrapperRef.current.style.opacity);
    if (wrapperRef.current.style.opacity === 0) {
      setIsHidden(true);
      console.log("true");
    } else if (wrapperRef.current.style.opacity === 1) {
      setIsHidden(false);
      console.log("false");
    }
  }, [position]);

Could you also share the other block of code where setIsHidden called? — Soheb, Jul 24 '22 at 08:52
I just created another useEffect with ```isHidden``` dependency, which ```console.log``` current ```isHidden``` state. However, it is never being called — Mantofka, Jul 24 '22 at 08:59
Also, it should ```console.log``` in the first block that I provided — Mantofka, Jul 24 '22 at 09:01

Twometer · Accepted Answer · 2022-07-24T09:03:08.517

6

As you can see here, style values are strings, but with the === operator you also check for type equality.

This means you check that '0' === 0 which are not the same types and also why your check never enters the if body.

Either check for '0' or use the == operator which does ignore types.

edited Jul 24 '22 at 09:03

answered Jul 24 '22 at 09:01

Twometer

1,561
2
16
24

1

Oh God, yes, in the photo we can see that the numbers are strings (not blue color, which represents a type of number) – Mantofka Jul 24 '22 at 09:02

useEffect does not go to if statements

1 Answers1