Best Practices with useEffect

Welcome to this lesson in the general overview of component lifecycle in React Native course! You’ve already learned how the useEffect hook helps you manage what happens when a component mounts, updates, or unmounts. In this lesson, we’ll build on that foundation and focus on best practices for using useEffect in real-world React Native apps. By the end, you’ll know how to write effects that are reliable, efficient, and easy to maintain — skills that will help you avoid common bugs and keep your apps running smoothly.

Let’s start by looking at the kinds of tasks that are typically handled with useEffect in React Native. You might remember from the previous lesson that useEffect is perfect for running code that needs to happen outside the normal rendering process. In React Native, this often includes things like setting up event listeners (for example, tracking screen size changes), starting or stopping timers, or fetching data from an API.

For example, suppose you want to track the width of the device’s screen and update your UI whenever it changes. You could use useEffect to set up an event listener for screen size changes:

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

const ScreenTracker = () => {
  const [width, setWidth] = useState(Dimensions.get("window").width);

  useEffect(() => {
    const updateWidth = () => setWidth(Dimensions.get("window").width);
    const subscription = Dimensions.addEventListener("change", updateWidth);

    // Cleanup: remove the event listener when the component unmounts
    return () => subscription.remove();
  }, []);

  return (
    <View>
      <Text>Screen width: {width}</Text>
    </View>
  );
};

In this example, the effect sets up a listener when the component mounts and cleans it up when the component unmounts. This is a common pattern for handling side effects in React Native.

A key part of using useEffect correctly is understanding the dependency array and cleanup functions. The dependency array tells React when to run your effect. If you pass an empty array ([]), the effect runs only once when the component mounts. If you include variables, the effect runs again whenever those variables change.

Cleanup functions are just as important. They let you undo or clean up any work your effect did, which helps prevent memory leaks or unwanted behavior. For example, if you set up an event listener, you should always remove it in the cleanup function.

Let’s look at a simple example that sets up and cleans up a timer:

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);

    // Cleanup: clear the interval when the component unmounts
    return () => clearInterval(interval);
  }, []);

  return <Text>Seconds: {seconds}</Text>;
};

Here, the timer starts when the component mounts and is cleared when the component unmounts. This prevents the timer from running in the background after the component is gone.

It’s important to make sure your effects run only when necessary. If you include too many dependencies or forget to use the dependency array, your effect might run more often than you want, causing unnecessary work and slowing down your app.

For example, if you want to save a note only when the text changes, you should include text in the dependency array. Here’s a simplified version of the auto-save pattern:

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

const AutoSaveNote = () => {
  const [text, setText] = useState("");
  const [savedText, setSavedText] = useState("");

  useEffect(() => {
    if (text === savedText) return;

    const timer = setTimeout(() => {
      setSavedText(text);
    }, 800);

    // Cleanup: cancel the timer if text changes before timeout
    return () => clearTimeout(timer);
  }, [text, savedText]);

  return (
    <View>
      <TextInput value={text} onChangeText={setText} />
      <Text>Last saved: {savedText}</Text>
    </View>
  );
};

In this example, the effect runs only when text or savedText changes. The cleanup function cancels any pending save if the user types again before the timer finishes. This keeps the app responsive and avoids unnecessary saves.

Let’s walk through a more complete example that combines these best practices. Imagine you’re building a mission log that auto-saves the user’s notes, but you want to avoid saving too often and make sure you don’t run into bugs if the user types quickly or leaves the screen.

Here’s a focused version of the auto-save note component:

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

const SAVE_DEBOUNCE_MS = 800;

const fakeSave = (text: string) =>
  new Promise<void>((resolve) => setTimeout(resolve, 600));

const AutoSaveNote = () => {
  const [text, setText] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [savedText, setSavedText] = useState("");
  const saveSeqRef = useRef(0);

  useEffect(() => {
    if (text === savedText) return;

    let isCancelled = false;
    const currentSeq = ++saveSeqRef.current;

    const timer = setTimeout(async () => {
      setIsSaving(true);
      await fakeSave(text);
      if (!isCancelled && currentSeq === saveSeqRef.current) {
        setSavedText(text);
      }
      setIsSaving(false);
    }, SAVE_DEBOUNCE_MS);

    return () => {
      isCancelled = true;
      clearTimeout(timer);
    };
  }, [text, savedText]);

  return (
    <View>
      <TextInput value={text} onChangeText={setText} placeholder="Type your note..." />
      <Text>{isSaving ? "Saving..." : `Last saved: ${savedText}`}</Text>
    </View>
  );
};

Let’s break down what’s happening here:

• The effect runs whenever text or savedText changes.
• If the text hasn’t changed since the last save, it does nothing.
• It sets a timer to save the note after a short delay (debouncing).
• If the user types again before the timer finishes, the previous timer is canceled.
• The saveSeqRef ensures that only the latest save operation updates the state, preventing race conditions if the user types very quickly.
• The cleanup function cancels any pending save when the component unmounts or before the next effect runs.

This pattern is efficient, avoids unnecessary saves, and is safe even if the user types quickly or navigates away.

You’ve now seen how to use useEffect effectively in React Native: handling side effects, using dependency arrays and cleanup functions, and optimizing for performance. We’ve also walked through a practical example that brings these ideas together. As you move on to the practice exercises, you’ll get hands-on experience applying these best practices to real code. Great progress so far and I hope you feel confident using useEffect to manage your component lifecycle in React Native!