How do you manage component-level state without `useState` or `useReducer`?

import { useState, useRef } from "react";

export default function App() {
  const [email, setEmail] = useState("");
  const isValid = email.includes("@");        // ✅ derived, not separate state
  const typedCount = useRef(0);               // ✅ mutable, no re-render
  typedCount.current = email.length;

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email" />
      <p style={{ color: isValid ? "green" : "crimson" }}>
        {isValid ? "looks valid" : "needs an @"}
      </p>
    </div>
  );
}