useEffect의 부작용

1. useEffect간의 연쇄 작용
   • useEffect가 여러 개 사용되다면 다른 useEffect에 영향을 끼치는 것까지 고려해야한다.
2. 흐름 추적의 어려움
   • useEffect는 deps에서 참조하는 상태들이 변하는 경우에 함수가 실행되는데, 실행 흐름만을 따라가다 보면 놓칠 수 있는 로직이 발생해 나중에 어떠한 useEffect가 어떤 흐름에서 파생되어 만들어졌는지 파악하기 어렵고, 디버깅도 어려울 수 있다.
3. React 18에 strict mode에서 마운트 시점에 useEffect를 두 번 실행시키는 문제가 있다.

<aside> ⚠️ useEffect를 남용하면 side Effect가 걷잡을 수 없이 커져서 유지보수가 어렵거나 새로운 기능을 추가할 때 버그가 발생할 확률도 높아지게 되므로 최소한으로 써야한다.

</aside>

1. props, state 변경에 따라 또 다른 state를 업데이트해야 할 때

import { useState } from 'react';

interface ChildProps {
  num: number;
}

const addFunc = (num: number) => num + 1;

const Child: React.FC<ChildProps> = ({ num }) => {
  const value = addFunc(num);
  return <div>{value}</div>;
};

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child num={count} />
      <button onClick={() => setCount((count) => count + 1)}>Click me!</button>
    </div>
  );
};

export default App;

• value를 state로 관리하여 useEffect안에 넣어서 사용하지 않고, props가 바뀌면 리렌더링 된다는 규칙을 활용하여 컴포넌트 안에서 로컬 변수로 사용하도록 한다.
• 만약 task가 큰 로직이라면, useMemo로 감싸서 사용한다.

2. props 변경에 따라 특정 상태만 업데이트 해야 하는 경우

import { useState } from 'react';

interface ChildProps {
  num: number;
}

const Child: React.FC<ChildProps> = ({ num }) => {
  const [extra] = useState('ㅋㅋㅋ');
  const [bonusNum, setBonusNum] = useState(0);
  const [prevNum, setPrevNum] = useState(num);

  if (num !== prevNum) {
    setPrevNum(num);
    setBonusNum(num);
  }

  return (
    <div>
      <div>num: {bonusNum}</div>
      <div>{extra}</div>
    </div>
  );
};

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child num={count} />
      <button onClick={() => setCount((count) => count + 1)}>Click me!</button>
    </div>
  );
};

export default App;

• 이전 상태를 관리하는 State를 만들고 num이 바뀌지 않았으면 리렌더링을 발생시키지 않는다.

3. useEffect vs eventHandler

• useEffect는 컴포넌트가 렌더링 되는 시점에 유저에게 표현되어야 할 로직을 실행할 때 사용된다
• event handler 내부에서 처리할 수 있는 로직은 useEffect가 아닌 event handler 내부에서 처리하는 것이 좋다.