Component Lifecycle Basics

Welcome to the very first lesson of the General Overview of Component Lifecycle in React Native course! In this course, you'll learn how React Native components behave as they appear, update, and disappear from the screen. Understanding these lifecycle phases — mounting, updating, and unmounting — is essential for building reliable, efficient, and bug-free mobile apps.

In React Native, every component goes through a predictable journey: it is created (mounted), it may change (updated), and eventually, it is removed (unmounted). Managing what happens during each of these phases helps you fetch data at the right time, clean up resources, and respond to user interactions smoothly. In this lesson, we’ll focus on how to handle these phases using functional components and the useEffect hook, which is the modern way to manage side effects in React Native.

In the past, React developers used special methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components to handle lifecycle events. With the rise of functional components, the useEffect hook has become the standard way to manage side effects and lifecycle logic.

The useEffect hook lets you run code after your component renders. You can use it to fetch data, set up event listeners, or perform any action that should happen as a result of your component being on the screen. By adjusting how you use useEffect, you can control whether your code runs once (on mount), every time something changes (on update), or when the component is about to be removed (on unmount).

The useEffect hook always runs after the component’s render has been committed to the screen. This means any code inside useEffect will not block the initial render, making it safe for side effects like data fetching or setting up subscriptions.

Here’s a simple example to illustrate how useEffect works:

import React, { useEffect } from "react";
import { Text } from "react-native";

const ExampleComponent = () => {
  useEffect(() => {
    // This code runs when the component mounts
    console.log("Component mounted!");

    // This function runs when the component unmounts
    return () => {
      console.log("Component will unmount!");
    };
  }, []); // Empty array means this effect runs only once

  return <Text>Hello, world!</Text>;
};

In this example, the message "Component mounted!" appears in the console when the component first loads, and "Component will unmount!" appears when it is removed. The empty array ([]) tells React to run this effect only once, mimicking the behavior of mounting and unmounting.

When a component is first added to the screen, we say it is mounted. This is the perfect time to perform setup tasks, such as fetching data from an API, starting a timer, or logging that the component is now visible.

To run code only when a component mounts, you use useEffect with an empty dependency array. Let’s look at a practical example using a component called TrackedComponent:

import React, { useEffect } from "react";
import { View, Text } from "react-native";

const TrackedComponent = ({ handleMount }) => {
  useEffect(() => {
    handleMount(); // Call the mount handler when the component loads
  }, []); // Only runs once, on mount

  return (
    <View>
      <Text>Tracked component</Text>
    </View>
  );
};

Here, handleMount is a function passed in as a prop. It gets called only once, right after the component appears. This is a common pattern for initializing data or starting background tasks.

After a component is mounted, it may need to respond to changes in its state or props. This is called updating. For example, you might want to run some code every time a user clicks a button or when new data arrives from a parent component.

To handle updates, you provide a dependency array to useEffect that lists the values you want to watch. Whenever any of these values change, your effect runs again.

Let’s extend our TrackedComponent to respond to a changing clickCount:

import React, { useEffect } from "react";
import { View, Text } from "react-native";

const TrackedComponent = ({ handleUpdate, clickCount }) => {
  useEffect(() => {
    handleUpdate(); // Call the update handler whenever clickCount changes
  }, [clickCount]); // Effect runs on every clickCount change

  return (
    <View>
      <Text>Click count: {clickCount}</Text>
    </View>
  );
};

In this example, whenever clickCount changes, the handleUpdate function is called. This is useful for tasks like saving data, updating analytics, or triggering animations in response to user actions.

Eventually, a component may be removed from the screen — this is called unmounting. It’s important to clean up any resources you set up during mounting or updating, such as timers, subscriptions, or event listeners. Failing to do so can lead to memory leaks or unexpected behavior.

You can handle cleanup in useEffect by returning a function. This function runs right before the component is unmounted.

Here’s how you might use this in our TrackedComponent:

import React, { useEffect } from "react";
import { View, Text } from "react-native";

const TrackedComponent = ({ handleMount, handleUnmount }) => {
  useEffect(() => {
    handleMount(); // Run on mount

    return () => {
      handleUnmount(); // Run on unmount
    };
  }, []); // Only runs on mount and unmount

  return (
    <View>
      <Text>Tracked component</Text>
    </View>
  );
};

In this code, handleMount is called when the component loads, and handleUnmount is called just before it is removed. This pattern is essential for cleaning up side effects and keeping your app running smoothly.

While useEffect is powerful, it’s easy to make mistakes if you’re not careful. One common pitfall is forgetting to include all necessary dependencies in the dependency array. This can cause your effect to run at the wrong times or not at all. Another issue is forgetting to clean up resources, which can lead to memory leaks.

For example, if you set up an event listener but forget to remove it, your app might keep responding to events even after the component is gone. Always remember to return a cleanup function from your effect when you set up something that needs to be removed.

Here’s a quick tip:

• If your effect uses a value (like a prop or state variable), make sure it’s listed in the dependency array.
• If you set up something in your effect (like a timer or subscription), clean it up in the returned function.

In this lesson, you learned how to manage the lifecycle of functional components in React Native using the useEffect hook. We explored how to run code when a component mounts, respond to updates, and clean up when a component unmounts. You also saw how to avoid common mistakes and keep your components efficient and bug-free.

Next, you’ll get hands-on practice with these concepts. You’ll write your own effects, handle updates, and ensure your components clean up after themselves. This practical experience will help you build more robust and maintainable React Native apps. Let’s get started!