reactjs

Place all routing in a src/navigation directory with a paths.ts constants file, PrivateRoute and PublicRoute guards, and separate private.routes.tsx and public.routes.tsx files using lazy imports. Expose an AppRoutes component via useRoutes so App.tsx stays minimal.

Use TanStack Query custom hooks per module instead of useEffect or direct fetch calls in components. Define useQuery hooks for reads and useMutation hooks with queryClient.invalidateQueries for writes, keeping components free of data-fetching logic.

No, this standard prohibits React.FC and React.FunctionComponent. Type props directly in the destructured argument, for example ({ title, children }: Props), which gives cleaner inference and avoids implicit children typing issues.

Yes, ErrorBoundary is the one allowed exception to the no-class rule because React requires getDerivedStateFromError and componentDidCatch, which only exist on class components. Mount it at the application root to catch runtime rendering errors.

Deriving state with useEffect causes extra renders and stale-value bugs. Compute derived values directly during render, such as const fullName = firstName + ' ' + lastName, so the value always stays consistent with its source state.