set-state-in-render

// ❌ 렌더링 중에 직접 무조건 setState
function Component({value}) {
  const [count, setCount] = useState(0);
  setCount(value); // 무한 루프!
  return <div>{count}</div>;
}

// ✅ 렌더링 중에 파생
function Component({items}) {
  const sorted = [...items].sort(); // 렌더링 중에 계산
  return <ul>{sorted.map(/*...*/)}</ul>;
}

// ✅ 이벤트 핸들러에서 state 설정
function Component() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

// ✅ state를 설정하는 대신 props에서 파생
function Component({user}) {
  const name = user?.name || '';
  const email = user?.email || '';
  return <div>{name}</div>;
}

// ✅ 이전 렌더링의 props와 state로부터 조건부로 state 파생
function Component({ items }) {
  const [isReverse, setIsReverse] = useState(false);
  const [selection, setSelection] = useState(null);

  const [prevItems, setPrevItems] = useState(items);
  if (items !== prevItems) { // 이 조건이 유효하게 만듭니다
    setPrevItems(items);
    setSelection(null);
  }
  // ...
}

// ❌ 잘못된 예시: 렌더링 중에 제한
function Counter({max}) {
  const [count, setCount] = useState(0);

  if (count > max) {
    setCount(max);
  }

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

// ✅ 업데이트할 때 제한
function Counter({max}) {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(current => Math.min(current + 1, max));
  };

  return <button onClick={increment}>{count}</button>;
}