Hooks Tips Ep. 1 - The Dependency Array

Published 📅: ....
Last modified 📝: ....

Share this post on Bluesky See discussion on Bluesky

This blog post is the first in what I expect to be a series on hooks, this blog post assumes you have a decent initial understanding of them. I highly suggest starting with the ReactJS Docs on them first.

Some of the built-in hooks from the React package expose a second argument which acts as an indicator or signal to React to determine if the function provided as the first argument to the hook should be invoked again.

In this post I will only reference useEffect, however there are several hooks which follow this pattern:

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // Gets called on initial render, and every time `count` changes
  }, [count]);
  return null;
}

function App() {
  useEffect(() => {
    // Only gets called when the component "mounts"
  }, []);
  return null;
}

function App() {
  useEffect(() => {
    // Gets called on every re-render of the App component
  });
  return null;
}

Hooks Tips Ep. 1 - The Dependency Array

Hooks Tips Ep. 1 - The Dependency Array

Passing Dependencies:

An Empty Dependency Array:

No Dependency Array:

Tags:

Related Posts

Development

Related Posts

Development

React