Understanding useEffect vs. Class Component Lifecycle Methods in React Native

React Native, like React, allows developers to manage side effects in functional components using Hooks. The useEffect Hook is a powerful tool that replaces lifecycle methods traditionally used in class components. In this blog, we’ll explore the differences between useEffect and class component lifecycle methods in the context of React Native.

---

1️⃣ useEffect(() => {...}) (Runs on Every Render)

Functional Component:

useEffect(() => {
    console.log("Runs on every render");
  });

Equivalent in Class Component:

class MyComponent extends Component {
  componentDidMount() {
    console.log("Runs on mount");
  }

  componentDidUpdate() {
    console.log("Runs on every update");
  }
}

🔍 Comparison:

• useEffect runs after every render.
• In class components, you need both componentDidMount and componentDidUpdate.
• Functional components provide a more concise syntax in React Native.

---

2️⃣ useEffect(() => {...}, []) (Runs Only on Mount)

Functional Component:

useEffect(() => {
  console.log("Runs only on mount");
}, []);

Equivalent in Class Component:

class MyComponent extends Component {
  componentDidMount() {
    console.log("Runs only on mount");
  }
}

🔍 Comparison:

• Both run only once when the component mounts.
• useEffect is simpler and eliminates the need for componentDidMount.

---

3️⃣ useEffect(() => {...}, [dependency]) (Runs When a State/Prop Changes)

Functional Component:

useEffect(() => {
  console.log(`State changed: ${count}`);
}, [count]);

Equivalent in Class Component:

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`State changed: ${this.state.count}`);
    }
  }
}

🔍 Comparison:

• useEffect runs only when count changes, whereas componentDidUpdate requires manual checks.
• React Native benefits from the performance improvements of useEffect when handling state changes.

---

4️⃣ useEffect with Cleanup (Unmounting)

Functional Component:

useEffect(() => {
  const interval = setInterval(() => {
    console.log("Interval running...");
  }, 1000);

  return () => {
    clearInterval(interval);
    console.log("Cleanup on unmount");
  };
}, []);

Equivalent in Class Component:

class MyComponent extends Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      console.log("Interval running...");
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
    console.log("Cleanup on unmount");
  }
}

🔍 Comparison:

• Functional components use a **return function inside **useEffect for cleanup.
• Class components require a separate componentWillUnmount method.

---

useEffect with Multiple Dependencies

Functional Component:

useEffect(() => {
  console.log(`Either count or name changed`);
}, [count, name]);

Equivalent in Class Component:

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count || prevState.name !== this.state.name) {
      console.log("Either count or name changed");
    }
  }
}

🔍 Comparison:

• useEffect automatically tracks multiple dependencies.
• Class components require explicit if conditions for each state/prop.

---