In React, the life cycle is composed of Mount(create) , Update(update) and Unmount(delete) .

The life cycle method is defined as those of method.

componentDidMount

created when the first render once.

Used when API connection, DOM manipulation.

componentDidUpdate

Run when updating DOM.

Used in every time updating such as DOM manipulation.

componentWillUnmount

Run when deleting components.

Used in eventListner, timer, and closing API connection.

Side Effect Hook

useEffect hook can replace the life cycle method instead.

useEffect can be used for componentDidMount(runs when generate component) , componentDidUpdate(runs every time update) and componentWillUnmount(runs when delete component) .

**componentDidMount

useEffect ( () => { // Runs when initial render }, []);

Enter fullscreen mode

Exit fullscreen mode

**componentDidUpdate

useEffect ( () => { // Runs every time when rendering });

Enter fullscreen mode

Exit fullscreen mode

**componentWillUnmount

useEffect ( () => { // Runs every time…