React useEffect Hooks

React Hook: useEffect

Before hooks were introduced, class component lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount were used to manage side effects. These include data fetching, subscriptions, DOM manipulations, and more. React 16.8 introduced the useEffect hook, enabling side effect management in function components.

Syntax:

Effect callback function: This is where your side effect logic is placed.
Dependencies array: Optional array that determines when the effect should run. If empty, the effect runs only once after mounting.

Understanding Dependencies

The dependency array plays a crucial role in dictating when the effect should re-run. Below are different use cases:

1. No Dependency Array

This logs “Component rendered!” on every render.

2. Empty Dependency Array

This logs only once when the component mounts, similar to componentDidMount.

3. With Specific Dependencies

This will run only when the count variable changes.

Common Use Cases of useEffect

1. Data Fetching

Explanation:

Component: GetDataComponent fetches and displays API data.
State:
- data: Stores the fetched data.
- displayLoading: Manages loading state.
useEffect: Fetches data once on component mount.
Loading: Displays “Loading…” until data is fetched.

2. Event Listeners or Subscriptions

This sets up and cleans up a window resize event listener.

3. Timers and Intervals

This logs every second and stops when the component unmounts.

4. Animating a Component

Explanation:

State: triggerAnimation toggles animation state.
useEffect: Watches triggerAnimation and modifies CSS transform.
Style: #animateMe is a blue box with animation.
Button: Triggers rotation toggle on click.

Cleanup in useEffect

Always clean up timers, listeners, or subscriptions in useEffect to avoid memory leaks.

The cleanup function runs when the component unmounts or before re-running the effect.

Conclusion

The useEffect hook is a powerful tool for managing side effects in React function components. It replaces lifecycle methods from class components and supports:

Data fetching
Event handling
Subscriptions
Timers and intervals
Animations and UI effects

Mastering useEffect and its best practices ensures that your components perform efficiently and remain easy to maintain.

Request more information

React useEffect Hooks