프로젝트에서 useEffect 빈도
-
프로젝트 진행하면서 최소 data fetching이 한번 이상은 useEffect내부에서 호출하며 userEvent가 일어날때마다 리렌더링 되어야 할 경우 몇번이고 리렌더링 되기에 useState 다음으로 많이 사용된다.
-
usequery를 사용할때 특히 많이 사용되는 편이다.
usequery를 통해 data를 파싱하여 사용하는데 리렌더링을 하거나 위에 글처럼 최소 한번은 렌더링 하기위하여 항상 사용한다.
useEffect 사용하면서 주의할 점
-
가장 첫번째로 useEffect에서 사용되는 defendency Array는 특히 조심해서 사용한다, defendency Array안에 있는 변수는 다른 곳에서 변수가렌더링 될때마다 useEffect가 리렌더링 되기 때문에 항상 조심하여 신중히 사용한다.
-
React18 + StrictMode에서는 개발모드에서 data fetching이 최소 두 번이상 일어날 수 있다는 걸 아시나요?
2번 이상 일어나는 data fetching이 일어난다고 치자 최소한 사용자가 두번일어나는지 못느끼게 만드는 것을 목표로 해야한다.
해결방안
=> Effect가 두번 일어나도 유저가 못느끼게 코드를 작성하는 방법을 찾아보자. => cleanup 함수를 작성하여 해결한다.
=> useEffect를 통해 이벤트가 일어날 함수를 useMemo나
item이 변경 되서 리렌더링을 해야 한다고 할 때
function List({ items }) {
const [isReverse, setIsReverse] = useState(false);
const [selection, setSelection] = useState(null);
// Better: Adjust the state while rendering
const [prevItems, setPrevItems] = useState(items);
if (items !== prevItems) {
setPrevItems(items);
setSelection(null);
}
// ...
}useState에 items 상태를 담고, prevItems와 items를 비교함으로 인해 리렌더링을 줄여 첫 렌더링시 if statement를 통해 렌더링 횟수를 줄였다.
- eventhandler를 사용할때 useEffect에 일을 전가하지 않고 내부에서 해결할 수 있으면 내부에서 해결한다.
생각보다 eventhandler에서 로직을 처리하지 않고 useEffect를 사용하여 로직을 처리하는 개발자가 많은 편이다.
