I have a useEffect that I want only to be run on the initial render and when a variable changes. That means that I don't want it to be run every time the component rerenders. This is where I'm stuck, this is my current code simplified:
useEffect(() => {
// Some logic only to be performed when variable changes OR at initial render
}, [variable]);
Any ideas on how to achieve this?
You need to conditionally run it on every render, so get rid of the dependency array and add conditions inside your useEffect. Otherwise, you can make 2 useEffects, one with an empty dependency array, and the other with the state variable.
In case you want your useEffect to run on initial render then do it like this:
useEffect(()=>{
// do whatever you want to do here
},[]);
and in case you want it to run on some variable change then:
useEffect(() => {
// Some logic only to be performed when variable changes OR at initial render
}, [variable]);
```
{ isVisible && <YourComponent /> }... & isVisible is changing, i dont think you can prevent this at a hooks level, unless you do some sort of global memoization outside the component