Calling one hook multiple times but running logic inside it only once for given render phase

user_2406296 0
Viewed 132

I have app where I have multiple calls to a hook, to simplify the example let's assume it looks like this:

const Test = () => {

  ...
  useTest();
  useTest();
  ....
}

and let's assume that useTest looks like that:

export default function useTest() {
  useEffect(() => {
    console.log('test');
  })
}

how I can make the console.log to be run only once in given render/rerender phase no matter how many times this hook is called?

react-hooks reactjs javascript
1 Answers

You can use the dependency array on useEffect.

export default function useTest() {
  useEffect(() => {
    console.log('test');
  },[]) // Run only once
}

export default function useTest() {
  useEffect(() => {
    console.log('test');
  },[someVar]) // Run on first mount and every time someVar changes
}
user_149128720
Related