Guarantees DOM updates before effect execution
Effects are an escape hatch from the React paradigm. If there is no external system involved you shouldn’t need an Effect. When something can be calculated from the existing props or state, don't put it in state. Instead, calculate it during rendering. You can cache or React.memo an expensive calculation by wrapping it in a React useMemo() hook.
It combines componentDidMount, componentDidUpdate, and componentWillUnmount. The double invocation in development environment is intentional by design (implying effects should be resilient to multiple calls).
Not need an effect
react.dev
https://react.dev/learn/you-might-not-need-an-effect
Using the Effect Hook - React
Hooks 는 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. Effect Hook 을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. 위의 코드는 이전 페이지의 카운터 예시 를 바탕으로 하지만, 문서의 타이틀을 클릭 횟수가 포함된 문장으로 표현할 수 있도록 새로운 기능을 더했습니다.
https://ko.reactjs.org/docs/hooks-effect.html


Seonglae Cho