React Hook: useEffect
Learn how to perform side effects in React functional components using the useEffect hook.
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')
);
React application with useEffect hook
On lines 8–12 , we declare a useEffect hook function on the App component. This function, as defined, runs ...
Ask