react-coding

React Coding

Match the project's existing conventions. When uncertain, read 2-3 existing components to infer the local style. Check tsconfig.json for strictness settings, package.json for React version, and framework config (Next.js, Remix, Vite) for routing and rendering conventions. These defaults apply only when the project has no established convention.

Never rules

These are unconditional. They prevent bugs, wasted renders, and vulnerabilities regardless of project style.

• Never useEffect for derived state -- if a value can be computed from props or state, compute it during render. useEffect + setState for derivable values causes an unnecessary extra render cycle. This is the most common React mistake.

// Wrong: extra render cycle for a value computable from props
const [fullName, setFullName] = useState("");
useEffect(() => {
  setFullName(`${first} ${last}`);
}, [first, last]);

// Correct: compute during render
const fullName = `${first} ${last}`;

• Never useEffect for event-driven logic -- user-triggered actions belong in event handlers, not effects keyed to state flags. Effects are for synchronizing with external systems.

// Wrong: effect triggered by state flag
const [submitted, setSubmitted] = useState(false);
useEffect(() => {
  if (submitted) sendAnalytics();
}, [submitted]);

// Correct: logic in the event handler
function handleSubmit() {
  sendAnalytics();
  navigate("/done");
}

• Never fetch data in useEffect without cleanup -- missing AbortController causes race conditions on rapid prop changes. Prefer TanStack Query or framework data fetching over raw useEffect fetching entirely.

// Wrong: no abort, race condition on rapid userId changes
useEffect(() => {
  fetch(`/api/users/${userId}`).then(r => r.json()).then(setUser);
}, [userId]);

// Correct: AbortController for cleanup, error captured in state
// (rethrowing inside .catch would just create an unhandled rejection)
useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/users/${userId}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => { if (e.name !== "AbortError") setError(e); });
  return () => controller.abort();
}, [userId]);

// Best: TanStack Query handles caching, deduplication, and cancellation
const { data: user } = useQuery({
  queryKey: ["user", userId],
  queryFn: () => fetchUser(userId),
});