FE Development Standards

Appearance

Data Fetching & State Management ​

  • In client components, all data fetching must be done via useQuery from TanStack Query.
  • Direct requests with axios (or similar) inside client components are prohibited. TanStack Query already handles loading, error, success, retries, and caching.
  • In Next.js server components, fetching should rely on fetch or axios with proper error handling implemented by the developer.
  • Do not wrap data returned from useQuery into a new useState. TanStack Query is itself a state manager.
  • State usage must be intentional. Avoid scattering useState everywhere. Consider extracting logic into custom hooks.
  • Example: modal state (isOpen, onClose) should be encapsulated in a hook rather than placed in components arbitrarily.

Example – modal state hook ​

ts
// hooks/useModal.ts
import { useState, useCallback } from "react";

export function useModal() {
  const [isOpen, setIsOpen] = useState(false);

  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);

  return { isOpen, open, close };
}