Table of contents
In React, side effects are any actions that are performed outside of rendering a component, such as fetching data or updating the document title. React provides two main hooks for managing side effects: useEffect
and useLayoutEffect
.
useEffect
The useEffect
hook allows you to perform side effects in functional components. It takes two arguments: a callback function that performs the side effect and an array of dependencies that specify when the effect should be executed. Here's an example:
import { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
In this example, we use useEffect
to update the document title when the count
state changes. We pass an array containing count
as a dependency, which tells React to re-run the effect whenever count
changes.
useLayoutEffect
The useLayoutEffect
hook is similar to useEffect
, but it runs synchronously after all DOM mutations. This means that it can be used to perform side effects that require access to the DOM, such as measuring the size of an element. Here's an example:
import { useState, useLayoutEffect } from 'react';
function ElementSize() {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const measureElement = () => {
const { width, height } = document.getElementById('element').getBoundingClientRect();
setWidth(width);
setHeight(height);
};
useLayoutEffect(() => {
measureElement();
window.addEventListener('resize', measureElement);
return () => {
window.removeEventListener('resize', measureElement);
};
}, []);
return (
<div>
<div id="element" style={{ width: '100px', height: '100px', backgroundColor: 'red' }}></div>
<p>Width: {width}px</p>
<p>Height: {height}px</p>
</div>
);
}
In this example, we use useLayoutEffect
to measure the size of a red box and display it on the page. We define a measureElement
function that gets the bounding rectangle of the element and updates the state with the width and height. We then use useLayoutEffect
to call measureElement
and add a resize event listener to update the size when the window is resized. We pass an empty array as a dependency, which tells React to run the effect only once when the component is mounted.
Conclusion
useEffect
and useLayoutEffect
are the main hooks for managing side effects in React. useEffect
is used for asynchronous side effects and useLayoutEffect
is used for synchronous side effects that require access to the DOM. In the next article in this series, we'll cover the context hook, useContext
.