React.js ~useEffect~

React rendering must be pure. You should not include side effect while rendering. This rule is defined in React.

Side effect must not run while rendering.

If side effect occures in user interaction, you should keep rendering pure by handling side effect in event handler.

By using event handler, you can tell react that the codebase need not run while rendering.

However, all of side effects run always with event handlers.

That's where effects come in.

Effect runs by not a specific event handler but rendering component.

useEffect is the hook that is used for handling effect. React uses it asa mark of effect.

effect occures by not an event but rendering. Therefore, useEffect separates effect from rendering, and delays code executing untill thecresukt of rendering is shown on the screen.

By using useEffect, you can keep rendering pure, and handle the effects properly.