React useEffect()

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2021 Mar 30 15:36
Editor
Edited
Edited
2025 Jul 15 9:16
Refs
Refs

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
Using the Effect Hook - React
Hooks 는 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. Effect Hook 을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. 위의 코드는 이전 페이지의 카운터 예시 를 바탕으로 하지만, 문서의 타이틀을 클릭 횟수가 포함된 문장으로 표현할 수 있도록 새로운 기능을 더했습니다.
Using the Effect Hook - React
 

Recommendations