Bharat Bhavnasi

Optimizing useEffect in React — A Comprehensive Deep Dive

• 5 min read
#react #javascript #frontend #optimization

React’s useEffect hook is a powerful tool in a developer’s arsenal, enabling side effects in function components. However, its power comes with the responsibility of using it optimally. Misuse can lead to performance issues, unnecessary re-renders, and hard-to-trace bugs. In this article, we’ll explore best practices and strategies to optimize useEffect, ensuring efficient and bug-free code.

Minimise Dependencies

  • Be Precise with Dependencies: Only include variables in the dependency array that are used within the useEffect.
function UserInfo({ user }) {
  useEffect(() => {
    getUserData(user.id);
  }, [user.id]); // Only user.id is necessary
}
  • Divide and Conquer: Split unrelated logic into separate useEffect hooks.
function UserComponent({ userId, organizationId }) {
  useEffect(() => {
    getUserData(userId);
  }, [userId]);

  useEffect(() => {
    getOrganizationData(organizationId);
  }, [organizationId]);
}
  • Avoid Infinite Loops: Be cautious when setting state inside useEffect. If you’re not careful, you can trigger an infinite loop.
// This will cause an infinite loop
useEffect(() => {
  setState(prevState => prevState + 1);
}, [setState]);

Clean Up Side Effects

If your effect sets up subscriptions or event listeners, always clean them up to avoid memory leaks.

useEffect(() => {
  const handler = () => console.log('Window resized');
  window.addEventListener('resize', handler);

  // Cleanup function
  return () => {
    window.removeEventListener('resize', handler);
  };
}, []);

Function Hoisting for Stability

Functions that don’t depend on the component’s state or props should be defined outside the component. This prevents them from being recreated on every render, ensuring stability.

const isEmailValid = (email) => {
  // validation logic
};

function EmailComponent() {
  useEffect(() => {
    if (isEmailValid(email)) {
      // Do something
    }
  }, [email]);
}

Harness the Power of Custom Hooks

Custom hooks offer a clean way to extract and reuse logic across components. They also provide an opportunity to encapsulate and optimize side-effect logic.

function useStringDescription(string) {
  const [description, setDescription] = useState({});

  useEffect(() => {
    // Compute description based on string
    setDescription(computeDescription(string));
  }, [string]);

  return description;
}

function StringComponent({ inputString }) {
  const description = useStringDescription(inputString);
  // Render logic
}

Stable Object References with useMemo

Objects recreated on every render can be problematic as dependencies. Use useMemo to ensure a stable object reference.

const configuration = useMemo(() => ({
  setting1: true,
  setting2: false,
}), []);

Lazy Initialization

For useState and useReducer, if the initial state requires complex computation, use a function to lazily compute the initial state.

const [state, setState] = useState(() => computeInitialState());

Debounce or Throttle Effects

For effects that run in response to rapid state or prop changes, consider debouncing or throttling the effect.

const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 300);

useEffect(() => {
  fetchData(debouncedQuery);
}, [debouncedQuery]);

Optimize Child Components

If a parent component’s re-render causes a child to re-render, leading to unnecessary effects, consider optimizing the child component with React.memo or ensuring props passed to the child have stable identities.

React.memo is a higher-order component that memoizes the rendered output of the passed component, preventing unnecessary renders if the props haven’t changed.

Example:

Suppose we have a Profile component that displays user information:

function Profile({ name, age }) {
  console.log('Profile component rendered!');
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

export default React.memo(Profile);

By wrapping the Profile component with React.memo, it will only re-render if the name or age props change.

Use Refs for Non-triggering Values

For values that should persist across renders but shouldn’t trigger effects or re-renders, use useRef.

const valueRef = useRef(initialValue);

Batch Multiple State Updates

Batching state updates can reduce the number of renders.

import ReactDOM from 'react-dom';

function someEffect() {
  ReactDOM.unstable_batchedUpdates(() => {
    setAction1(data1);
    setAction2(data2);
  });
}

Beware of Omitting Values

While optimizing useEffect is crucial, it’s equally important to be aware of the potential pitfalls of omitting dependencies. Omitting necessary values from the dependency array can lead to stale values inside the effect or other unexpected behaviors.

For instance, if you have logic inside your effect that depends on a prop or state but you omit it from the dependency array, the effect will not have access to the latest value, leading to bugs that can be hard to trace.

Moreover, if you’re using the eslint-plugin-react-hooks with the exhaustive-deps rule, it will warn you about missing dependencies. This is a helpful reminder to ensure that you’re not unintentionally omitting necessary values.

However, there might be cases where you intentionally want to omit a value from the dependency array. In such cases, you can suppress the ESLint warning, but always provide a reason:

useEffect(() => {
  // ... some logic that doesn't depend on any values
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

By being cautious and ensuring that you’re not omitting necessary values, you can strike a balance between optimization and correctness, leading to efficient and bug-free code.

Closing Thoughts

The useEffect hook, while powerful, requires a nuanced approach to ensure optimal performance. By following the strategies outlined in this article, developers can harness the full potential of useEffect, leading to efficient, maintainable, and bug-free React applications.

Try Out Some Challenges

Give the exercises on React.dev a try — they will help boost your confidence in using useEffect perfectly: Removing Effect Dependencies — Challenges

Share:
Suggest changes