커스텀 훅과 로직 재사용

// 위반: 조건에 따라 훅 호출 여부가 달라집니다
function OrderPanel({ orderId }) {
  if (!orderId) return null;
  const [order, setOrder] = useState(null);   // 오류
}

// 해결: 훅을 먼저 부르고 조건은 그 뒤에 둡니다
function OrderPanel({ orderId }) {
  const [order, setOrder] = useState(null);
  if (!orderId) return null;
  return <div>{order?.name}</div>;
}

린트 플러그인이 이 규칙을 검사합니다. 경고를 끄지 말고 구조를 바꾸는 방향으로 해결합니다.

// 입력값과 검증을 묶은 훅
function useInput(initialValue, validate) {
  const [value, setValue] = useState(initialValue);
  const [error, setError] = useState("");

  const onChange = (event) => {
    const next = event.target.value;
    setValue(next);
    if (error) {
      setError(validate(next) ?? "");
    }
  };

  const onBlur = () => setError(validate(value) ?? "");

  return { value, error, onChange, onBlur, reset: () => setValue(initialValue) };
}

// 사용하는 쪽
function OrderForm() {
  const receiver = useInput("", validateReceiver);
  const phone = useInput("", validatePhone);

  return (
    <form>
      <input value={receiver.value} onChange={receiver.onChange} onBlur={receiver.onBlur} />
      {receiver.error && <p className="error">{receiver.error}</p>}
    </form>
  );
}

receiver와 phone은 같은 훅을 쓰지만 서로 다른 상태를 갖습니다. 훅은 로직의 재사용이지 상태의 공유가 아닙니다.