如何在重新渲染和依赖项更改时运行单个 useEffect？

Question

I have the following code,

 const [over, setOver] = useState(false); useEffect(() => { //some logic }, [over]);

and I want to be able to run the use effect when the (over) has been changed and also if component props changes as for now the code runs only when over has been changed, similar to

 useEffect(() => { //some logic }, []);

Answer 1

Your first code and second are not similar at all. Second one runs once only when the component is mounted (added to the DOM). And first code will run onComponentMount and onOverChange .

You need to understand react component lifecycle to understand how useEffect works.

There are 3 lifecycle events. onMount , onStateChange and onUnMount . The callback function runs when onMount or onStateChange is triggered. When you use [] it means the code will only run when mounted and not on any stateChange event. (Cause there isn't any state available to watch)

useEffect(() => {
  // this will run when component is added to the DOM or a dependency state have changed
  console.log("mounted or dependency state changed");
  
  // this will run when component is destroyed
  return () => console.log("component unmounted");
  
}, [dependency1, dependency2]);

Answer 2

One straightforward way to do this is add the props in dependency array

  useEffect(() => {
     //some logic
  }, [over,props]);

But that is not really a good idea

Go through this once You might not need an effect