useEffectは「最後の手段」。Reactの「外」と「中」を理解して、不要なコードを消す技術

function UserForm() {
  const [firstName, setFirstName] = useState('太郎');
  const [lastName, setLastName] = useState('山田');

  // ❌ やりがち：派生値を state に持つ
  const [fullName, setFullName] = useState('');

  useEffect(() => {
    setFullName(`${lastName} ${firstName}`);
  }, [firstName, lastName]);

  return <div>{fullName}</div>;
}

function UserForm() {
  const [firstName, setFirstName] = useState('太郎');
  const [lastName, setLastName] = useState('山田');

  // ✅ 派生値はその場で計算
  const fullName = `${lastName} ${firstName}`;

  return <div>{fullName}</div>;
}

function MyInput({ initialValue }: { initialValue: string }) {
  const [value, setValue] = useState(initialValue);

  // ❌ props の変化を追いかけて state 更新
  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

function MyInput({
  value,
  onChange,
}: {
  value: string;
  onChange: (v: string) => void;
}) {
  // ✅ 親から来た値をそのまま使う
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

function Parent() {
  const [name, setName] = useState('山田太郎');
  return <MyInput value={name} onChange={setName} />;
}

// ✅ 親コンポーネントで key を指定
function Parent() {
  const [open, setOpen] = useState(false);
  const [editTarget, setEditTarget] = useState({ id: 1, name: '山田' });

  return (
    <EditModal
      key={editTarget.id}  // id が変わるとコンポーネントが再マウントされる
      open={open}
      initialValue={editTarget.name}
      onSave={(v) => {
        setEditTarget({ ...editTarget, name: v });
        setOpen(false);
      }}
    />
  );
}

function EditModal({
  open,
  initialValue,
  onSave,
}: {
  open: boolean;
  initialValue: string;
  onSave: (v: string) => void;
}) {
  // ✅ useState の初期値がそのまま使われる（useEffect 不要）
  const [draft, setDraft] = useState(initialValue);

  if (!open) return null;

  return (
    <div>
      <input value={draft} onChange={e => setDraft(e.target.value)} />
      <button onClick={() => onSave(draft)}>保存</button>
    </div>
  );
}

function EditModal({
  open,
  initialValue,
  onSave,
}: {
  open: boolean;
  initialValue: string;
  onSave: (v: string) => void;
}) {
  const [draft, setDraft] = useState(initialValue);
  const prevOpen = useRef(open);

  useEffect(() => {
    // ✅ 「閉じていた → 開いた」瞬間だけリセット
    if (open && !prevOpen.current) {
      setDraft(initialValue);
    }
    prevOpen.current = open;
  }, [open, initialValue]);

  if (!open) return null;

  return (
    <div>
      <input value={draft} onChange={e => setDraft(e.target.value)} />
      <button onClick={() => onSave(draft)}>保存</button>
    </div>
  );
}

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // ❌ isValid を state ＋ useEffect で管理
  const [isValid, setIsValid] = useState(false);

  useEffect(() => {
    const ok = email.includes('@') && password.length >= 8;
    setIsValid(ok);
  }, [email, password]);

  return (
    <form>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button disabled={!isValid}>ログイン</button>
    </form>
  );
}

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // ✅ その場で計算する
  const isValid = email.includes('@') && password.length >= 8;

  return (
    <form>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button disabled={!isValid}>ログイン</button>
    </form>
  );
}

function validateLogin(email: string, password: string): boolean {
  // ※ 実際のメールアドレス検証はもっと厳密に（正規表現やライブラリ推奨）
  return email.includes('@') && password.length >= 8;
}

const isValid = validateLogin(email, password);

function ContactForm() {
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  // ❌ イベントの本体処理を useEffect に追い出している
  useEffect(() => {
    if (!submitted) return;

    fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify({ message }),
    }).then(() => {
      alert('送信しました');
    });
  }, [submitted, message]);

  return (
    <form onSubmit={handleSubmit}>
      <textarea value={message} onChange={e => setMessage(e.target.value)} />
      <button type="submit">送信</button>
    </form>
  );
}

function ContactForm() {
  const [message, setMessage] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSending(true);
    setError(null);

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        body: JSON.stringify({ message }),
      });
      if (!res.ok) {
        throw new Error('送信に失敗しました');
      }
      alert('送信しました');
    } catch (err) {
      // ✅ エラーも state で管理して UI に反映
      setError(err instanceof Error ? err.message : '不明なエラー');
    } finally {
      setIsSending(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea value={message} onChange={e => setMessage(e.target.value)} />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit" disabled={isSending}>
        {isSending ? '送信中…' : '送信'}
      </button>
    </form>
  );
}

function Panel({ active }: { active: boolean }) {
  const ref = useRef<HTMLDivElement | null>(null);

  // ❌ DOM を直接いじって class を変える
  useEffect(() => {
    if (!ref.current) return;
    if (active) {
      ref.current.classList.add('active');
    } else {
      ref.current.classList.remove('active');
    }
  }, [active]);

  return <div ref={ref}>パネル</div>;
}

function Panel({ active }: { active: boolean }) {
  return (
    <div className={active ? 'panel active' : 'panel'}>
      パネル
    </div>
  );
}

function Panel({ active }: { active: boolean }) {
  return (
    <div style={{ opacity: active ? 1 : 0.5 }}>
      パネル
    </div>
  );
}

useEffect(() => {
  // userId を使った処理
  fetchUser(userId);
}, [userId]);  // ← userId を使っているので依存配列に含める

// .eslintrc.json
{
  "rules": {
    "react-hooks/exhaustive-deps": "error"
  }
}

useEffect(() => {
  // マウント時に一度だけ実行したい
  analytics.pageView(pageName);
  // eslint-disable-next-line react-hooks/exhaustive-deps -- 初回マウント時のみ記録したいため
}, []);