useEffect allows us to produce some side effects for our component. Anything that reaches outside of the component to do something. Like a network request or setting up timeouts and intervals. Their main job doesn't have to do with managing set or changing anything about the display of the component.

• By default useEffect runs after every re-render

We only run the code inside of the useEffect hook when the whenever the options inside of the array actually change, therefore, we can create a hook that only ever runs on mount by passing in an empty array.

If we need useEffect to only run during the initial render and not for re-renders, we can leave an empty arrray on the dependency list:

  useEffect(() => {
    console.log("call useEffect");
    if (value >= 1) {
      document.title = `New Messages (${value})`;
    }
  }, []);