let useEffect watch a condition and have it trigger only once

Question

React's useEffect looks like this:

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

where input is a list of values that trigger the effect when changed.

Let's say that I'm watching a number and I only want to trigger the effect when the number reaches 10. Is it possible to do that?

So far the best I could come up with is to encode the watched expression in a boolean value. The effect is then triggered twice, once when the boolean flips from false to true and a second time when it flips back to false. This is once too many.
Here's a small example:

export default function App() {
  const [num, setNum] = useState(0);
  const hit10 = num === 10;
  useEffect(() => {
    console.log("resetting");
    setNum(0);
  }, [hit10]);

  return (
    <button
      onClick={() => {
        setNum(num + 1);
      }}
    >
      {num}
    </button>
  );
}

The useEffect wil run when hit10 change, you need pass a check in useEffect like hit10 && setNum(0). — Vương Vũ Nguyễn, Jun 05 '20 at 10:06
check this https://stackoverflow.com/questions/57620799/react-hook-useeffect-is-called-conditionally — Dostonbek Oripjonov, Jun 05 '20 at 10:06

zb22 · Answer 1 · 2020-06-05T10:11:55.240

You don't need to use another variable like hit10, You can just put a condition inside useEffect() hook to check the number's value every time that the component was rendered.

 import React, {useState, useEffect} from "react";

    export default function App() {
      const [num, setNum] = useState(0);

      useEffect(() => {
        if(num === 10) {
          console.log("resetting");
          setNum(0);
        }
      }, [num]);

      return (
        <button
          onClick={() => {
            setNum(num + 1);
          }}
        >
          {num}
        </button>
      );
    }

let useEffect watch a condition and have it trigger only once

1 Answers1