React.js ~Life Cycle~

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
}, []);

**componentDidUpdate

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

**componentWillUnmount

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

• The lifecycle refers to the sequence of events through which a React component is created, updated, and eventually destroyed.

• The useEffect method in hooks allows you to perform operations similar to those of lifecycle methods within a single function.