React.js ~useEffect~

What is effect?

As i mentioned, React is a pure function. This means React should not include side effect. This principle is defined as a React's rule.

Refference: https://react.dev/reference/rules/components-and-hooks-must-be-pure

If any side effect occures with user interaction, you can keep pure function by writing side effect in the event handler.
Writing side effect in the event handler, you can tell React that the side effect doesn't occuer in rendering.

However, Not all side effects are caused by a specific event. That’s where effects come into play. Effects are side effects that are caused by not an specific handler but a rendering. useEffect is a hook that is used for handle side effect in React. React uses useEffect as a mark of effect.

Effect is occured by not event but rendering as a side effect. thus, useEffect separates effect from rendering, and delay the running codebases untill the result of rendering is reflected on the screen.

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