React Hook: useEffect
Explore the React useEffect hook to understand how it manages side effects like data fetching and event handling. Learn to implement cleanup functions and control when effects run by using dependency arrays to optimize component behavior.
We'll cover the following...
useEffect
The useEffect hook
The useEffect hook is a user-defined function in a component that React calls after rendering. The useEffect hook is a functional component equivalent of the class-based component methods of componentDidMount, componentDidUpdate, and componentWillUnmount combined. The React useEffect hook allows us to perform side effects in a React component. Examples of side effects of React components are data fetching, manual DOM manipulation, subscription, and so on.
Let’s see an example below:
import React from 'react';
require('./style.css');
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
On lines 8–12 , we declare a useEffect hook function on the App component. This function, as defined, runs ...