How to use useEffect in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Managing side effects and lifecycle operations is crucial for data fetching, subscriptions, and DOM manipulation in React functional components.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented useEffect in thousands of React components for API calls, event listeners, and cleanup operations in enterprise dashboards.
From my expertise, the most effective approach is to use the useEffect hook with proper dependency arrays.
This method provides precise control over when effects run and ensures optimal performance by preventing unnecessary re-executions.
Use useEffect hook to handle side effects and lifecycle operations in functional components.
useEffect(() => {
fetchData()
}, [])
The useEffect hook accepts a callback function that runs after the component renders. The second parameter is a dependency array that controls when the effect runs. An empty array [] means the effect runs only once after the initial render, similar to componentDidMount. Include variables in the dependency array to re-run the effect when those values change. Return a cleanup function from the effect to handle unsubscriptions or cleanup operations when the component unmounts.
Best Practice Note:
This is the same approach we use in CoreUI React components for data fetching and event handling. Always include all variables used inside the effect in the dependency array to avoid stale closure bugs, or use ESLint plugin for React Hooks to catch these issues automatically.
