Empty Square Brackets in Javascript?

Question

I came across this code in https://upmostly.com/tutorials/setinterval-in-react-components-using-hooks:

useEffect(() => {
  const interval = setInterval(() => {
    console.log('This will run every second!');
  }, 1000);
  return () => clearInterval(interval);
}, []);

I am curious what the square brackets [] at the end do? According to this site https://reactjs.org/docs/hooks-effect.html, we can use useEffect() without them.

Answer 1

We put an empty [], if we want the code inside useEffect to run only once. Without empty [], the code inside the useEffect will run on every render

Answer 2

See the documentation:

We don’t need to create a new subscription on every update, only if the source prop has changed.

...

pass a second argument to useEffect that is the array of values that the effect depends on.

...

If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model, there are usually better solutions to avoid re-running effects too often.