Using useEffect to create side effects

The useEffect Hook allows you to fetch data from external sources, update the DOM tree, and set up a data subscription. These operations are called side effects. In the class component, you have what we call lifecycle methods that can execute operations based on the phase of the component-rendering process. useEffect accepts two arguments: a function and an optional dependency.

It is important to note that useEffect does the work of the old componentDidMount, componentDidUpdate, and componentWillUnmount in one place. Using the useEffect Hook shortens the amount of code you have to write in a function component to achieve the same side effects.

The following is the syntax for the useEffects Hook:

- useEffect(<function>, <dependency>)useEffect(() => {
  // This callback function implementation is either to
     update DOM, fetch data from external sources, or to
    ...