Understanding the useEffect Hook in React.js and React Native

 The useEffect hook is one of the most commonly used hooks in React.js and React Native. It enables you to handle side effects in your components, such as fetching data, updating the DOM, or subscribing to events.

In this blog, we’ll dive into how useEffect works, its usage patterns, and best practices for both React.js and React Native.

What is useEffect?

The useEffect hook is part of React's Hooks API, introduced in React 16.8. It lets you perform side effects in functional components, replacing the need for lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

Syntax of useEffect

Here’s a basic syntax:

useEffect(() => {
  // Your side effect logic here

  return () => {
    // Cleanup logic here (optional)
  };
}, [dependencies]);

• Effect Function: The function that runs your side effect.
• Cleanup Function: An optional function returned from the effect function to clean up resources.
• Dependencies Array: Determines when the effect should re-run.

---

Common Use Cases

1. Data Fetching

In both React.js and React Native, you can fetch data from APIs using useEffect.

React.js Example:

import React, { useEffect, useState } from 'react';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []); // Empty dependency array ensures it runs only once

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

React Native Example:

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';

const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <View>
      <Text>User List</Text>
      <FlatList
        data={users}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>
  );
};

export default UserList;

---

2. Event Listeners

Adding and cleaning up event listeners is a common use case.

React.js Example:

useEffect(() => {
  const handleResize = () => {
    console.log('Window resized:', window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

React Native Example:

import { Dimensions } from 'react-native';

useEffect(() => {
  const handleResize = () => {
    const { width, height } = Dimensions.get('window');
    console.log(`Width: ${width}, Height: ${height}`);
  };

  const subscription = Dimensions.addEventListener('change', handleResize);

  return () => {
    subscription.remove();
  };
}, []);

---

3. Subscription Management

For scenarios like managing WebSocket connections or subscribing to services:

React.js/React Native Example:

useEffect(() => {
  const subscription = someService.subscribe();

  return () => {
    subscription.unsubscribe();
  };
}, []);

---

Dependency Array Explained

The dependency array is crucial for optimizing useEffect.

• No Dependencies ([]): The effect runs only once when the component mounts.
• Specific Dependencies: Runs whenever the listed dependencies change.
• No Array: Runs after every render (not recommended).

---

Best Practices

1. Always Include Dependencies: Avoid missing dependencies, as it can lead to unexpected behavior. Use tools like ESLint with React rules to catch such issues.

2. Avoid Infinite Loops: Don’t update the state directly inside the effect without proper dependencies, as it can lead to infinite re-renders.

3. Use Multiple Effects: Split logic into multiple useEffect calls for better readability.

4. Clean Up Side Effects: Always clean up resources like subscriptions or timers.

---

Key Differences Between React.js and React Native

• DOM vs Native Components: In React.js, you might manipulate the DOM directly, while in React Native, you work with native UI components.
• Event Handling: React.js often deals with browser events (click, resize), while React Native deals with native events (Dimensions, Keyboard).

---

Conclusion

The useEffect hook is a powerful tool for managing side effects in both React.js and React Native applications. By understanding its patterns and nuances, you can write cleaner and more efficient code.