Boosting Performance with useEffect: Best Use Cases and Examples

June 27, 2023 3-minute read

Introduction:

As a React developer, you’re likely familiar with the useEffect hook. It’s a powerful tool that allows you to manage side effects in functional components. While its primary role is to handle tasks like data fetching, DOM manipulation, and subscriptions, useEffect can also be a game-changer when it comes to optimizing your application’s performance. In this blog post, we’ll explore some of the best use cases of useEffect in improving performance, complete with sample code to help you get started.

1. Data Fetching and Caching

Fetching data from APIs is a common task in web applications, but repeated API calls can be costly in terms of both time and resources. useEffect can help optimize this process by fetching and caching data only when necessary.

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

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

const DataFetchingExample: React.FC = () => {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    };

    fetchData();
  }, []); // Empty dependency array ensures the effect runs only once

  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingExample;

2. Debouncing and Throttling

User interactions like typing, window resizing or scrolling can trigger rapid updates, potentially causing unnecessary re-renders. By utilizing useEffect with debounce or throttle techniques, you can control the frequency of updates.

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

const DebounceExample: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState<string[]>([]);

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      // Simulate API call with search term
      const results = ['result 1', 'result 2', 'result 3'];
      setSearchResults(results);
    }, 500);

    return () => clearTimeout(delayDebounceFn);
  }, [searchTerm]);

  return (
    <div>
      <input type="text" placeholder="Search" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      <ul>
        {searchResults.map((result) => (
          <li key={result}>{result}</li>
        ))}
      </ul>
    </div>
  );
};

export default DebounceExample;

3. Event Listeners and Cleanup

Managing event listeners can be challenging, especially when they need to be added and removed properly to prevent memory leaks. useEffect can ensure proper setup and cleanup of event listeners.

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

const EventListenerExample: React.FC = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  const handleResize = () => {
    setWindowWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      <p>Window Width: {windowWidth}px</p>
    </div>
  );
};

export default EventListenerExample;

4. Optimizing Animations

useEffect can also play a role in optimizing animations. By using it to manage the timing of animation updates, you can prevent unnecessary re-renders during animations.

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

function AnimationComponent: React.FC = () => {
  const [position, setPosition] = useState<number>(0);

  useEffect(() => {
    const animationFrame = requestAnimationFrame(() => {
      setPosition((prevPosition) => prevPosition + 1);
    });

    return () => {
      cancelAnimationFrame(animationFrame);
    };
  }, [position]);

  return (
    <div
      style={{
        width: '100px',
        height: '100px',
        background: 'blue',
        transform: `translateX(${position}px)`,
      }}
    ></div>
  );
}

export default AnimationComponent;

Conclusion:

useEffect hook is a versatile tool that goes beyond managing side effects in React components. By understanding its potential for improving performance, you can optimize your app’s behavior in various scenarios. Whether it’s debouncing events, optimizing network requests, or managing DOM updates, useEffect can play a crucial role in making your application faster and more efficient. Remember to carefully consider the dependencies and cleanup functions to ensure your optimizations work seamlessly.

Incorporating these techniques and approaches into your React applications can lead to smoother user experiences, faster load times, and more efficient resource usage. Happy coding!