In React, a side-effect refers to any behavior or logic that occurs outside of the component’s render method. Examples of side-effects include
- fetching data from an API
- subscribing to events
- modifying the DOM outside of the component’s return statement.
In class-based components, React side-effects are typically handled in lifecycle methods such as
componentDidMountcomponentDidUpdatecomponentWillUnmount
However, in functional components, which don’t have lifecycle methods, side effects need to be handled differently. That’s where useEffect hook comes into play.
useEffect allows you to synchronize a component with an external system and manage side effects in a functional component. It is a Hook that takes two arguments: a callback function and an array of dependencies. The callback function is called after the component renders and it should contain the side effect logic. The array of dependencies is used to determine when to re-run the effect.
To read more about it please refer to: Everything you need to know about React’s useEffect