Effects in React

Before we look at how to use the useEffect hook, we need to understand what effects are in React.

Effects or side effects are additional actions that allow a component to connect to and synchronize with external systems.

External systems are those pieces of code or applications that are not under React's control. This includes networking, browser DOM, animation, widgets written using third-party UI libraries, and other applications not built with React.

Effects allow you to run code after rendering, thus giving you the ability to sync your component with systems outside of React.

Effects can be executed when a component is first rendered, when an observable value changes, or when the component's lifecycle ends.

It is important to remember that effects are a kind of "escape" hatch from React, you should not abuse them.