Mounting Actions

1. The "Mount" Effect: Running Code Once

In the previous lesson, you were introduced to the idea that providing an empty dependency array ([]) makes an effect run only once. Let's solidify that concept.

When you provide [] as the second argument to useEffect, you are essentially telling React: "This effect doesn't depend on any props or state from my component. Since its dependencies will never change, you only need to run it one time, right after the initial render."

This "run once" behavior is what we refer to when we talk about running an effect when a component mounts. Mounting is the phase in a component's life when React creates it and inserts it into the DOM for the first time.

This image provides a great visual summary. We are focusing on the "Mount" column.

Now, let's watch a video that walks through a code example and explains this concept in detail.

To recap the key idea from the video:

• An effect with [] as its dependency array runs after the first render.
• It will not run again on subsequent re-renders, regardless of what state or props change.

This makes it the perfect tool for any "setup" logic that your component needs to do only once.

2. A Core Use Case: Fetching Initial Data

The most common reason to run an effect once is to fetch data from an API when the component first loads. Let's see why the empty dependency array is crucial for this task.

Imagine you want to fetch a list of posts and display them. You might try this:

// A simplified, buggy example
function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data)); // This updates the state
  }); // 🔴 No dependency array!

  // ... render posts
}

What's the problem here?

1. The component renders for the first time.
2. useEffect runs because there is no dependency array.
3. The API call is made, and eventually, setPosts(data) is called.
4. Calling setPosts updates the component's state, which triggers a re-render.
5. Since the component re-rendered, useEffect runs again (back to step 2).

This creates an infinite loop, bombarding the API with requests.

The solution is to tell React to only run this effect once.

// The correct way
function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []); // ✅ Empty dependency array

  // ... render posts
}

Now, the effect runs only after the initial render, fetches the data, updates the state once, and then stops. The infinite loop is broken.

Let's watch a detailed walkthrough of this exact scenario. It also covers the correct way to handle async/await syntax inside useEffect, which is a very practical skill.

The key pattern for fetching data with an async function is to define and call it from within the effect:

useEffect(() => {
  // 1. Define an async function inside the effect
  const fetchData = async () => {
    try {
      const response = await fetch('...');
      const data = await response.json();
      // 3. Update state with the fetched data
      setState(data);
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  };

  // 2. Call the function
  fetchData();
}, []); // 4. Use an empty array to run only once

This is a fundamental pattern you will use constantly when building React applications.

For a quick reference, the article "UseEffect Dependency Array: Best Practices For React" also provides a concise explanation and code example for this data-fetching pattern.

Conclusion

You have now mastered one of the most important patterns in React development. Knowing how to perform an action once on component mount is critical for creating efficient and bug-free applications.

Key Takeaways:

• To run an effect only once when a component mounts, pass an empty dependency array ([]) as the second argument to useEffect.
• This is the standard pattern for performing one-time setup tasks, with fetching initial data from an API being the most common use case.
• Using an empty dependency array for data fetching is crucial to prevent infinite loops that occur when you update state inside an effect without dependency control.
• This pattern is the modern, functional equivalent of the componentDidMount lifecycle method found in older class-based React components.

Next Up:

We've covered what happens when a component is created (mounts) and when it's updated (re-renders). But what about when it's removed from the screen? Side effects like timers or network subscriptions need to be stopped, or they can cause memory leaks. In the next lesson, we'll explore the cleanup function that you can return from useEffect to handle this.