Refactor components to remove unused React imports

components/domain/dns-group.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type DnsGroupColor =
   | "slate"
   | "blue"
@@ -22,7 +20,7 @@ export function DnsGroup({
   chart?: 1 | 2 | 3 | 4 | 5;
   count?: number;
 }) {
-  const actualCount = count ?? React.Children.count(children);
+  const actualCount = count ?? (Array.isArray(children) ? children.length : 1);
   if (actualCount === 0) return null;
   const chartVar =
     chart === 1

components/domain/dns-record-list.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { useMemo } from "react";
 import {
   Tooltip,
   TooltipContent,
@@ -20,7 +20,7 @@ export function DnsRecordList({
   type: DnsRecord["type"];
   showTtls: boolean;
 }) {
-  const filtered = React.useMemo(() => {
+  const filtered = useMemo(() => {
     const arr = records.filter((r) => r.type === type);
     if (type === "MX") {
       arr.sort((a, b) => {

components/domain/domain-report-view.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { DomainReportView } from "./domain-report-view";
 

components/domain/domain-suggestions.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
+import { createElement } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DomainSuggestions } from "./domain-suggestions";
 
@@ -10,7 +10,7 @@ vi.mock("next/navigation", () => ({
 
 vi.mock("./favicon", () => ({
   Favicon: ({ domain }: { domain: string }) =>
-    React.createElement("span", {
+    createElement("span", {
       "data-slot": "favicon",
       "data-domain": domain,
     }),

components/domain/domain-suggestions.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { captureClient } from "@/lib/analytics/client";
 import { Favicon } from "./favicon";
@@ -27,10 +27,10 @@ export function DomainSuggestions({
 }) {
   const router = useRouter();
 
-  const [history, setHistory] = React.useState<string[]>([]);
-  const [historyLoaded, setHistoryLoaded] = React.useState(false);
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyLoaded, setHistoryLoaded] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     try {
       const stored = localStorage.getItem("hoot-history");
       if (stored) setHistory(JSON.parse(stored));
@@ -41,7 +41,7 @@ export function DomainSuggestions({
     }
   }, []);
 
-  const suggestions = React.useMemo(() => {
+  const suggestions = useMemo(() => {
     const merged = [
       ...history,
       ...DEFAULT_SUGGESTIONS.filter((d) => !history.includes(d)),

components/domain/favicon.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
+import { createElement } from "react";
 import type { Mock } from "vitest";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Favicon } from "./favicon";
@@ -17,7 +17,7 @@ vi.mock("next/image", () => ({
     width: number;
     height: number;
   }) =>
-    React.createElement("img", {
+    createElement("img", {
       alt,
       src,
       width,

components/domain/hosting-map.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import { memo } from "react";
 import MapboxMap, { Marker, NavigationControl } from "react-map-gl/mapbox";
 import type { HostingInfo } from "@/server/services/hosting";
 import "mapbox-gl/dist/mapbox-gl.css";
@@ -38,7 +38,7 @@ function MapInner({ hosting }: { hosting: HostingInfo }) {
   );
 }
 
-export const HostingMap = React.memo(MapInner, (prev, next) => {
+export const HostingMap = memo(MapInner, (prev, next) => {
   const p = prev.hosting.geo;
   const n = next.hosting.geo;
   return p.lat === n.lat && p.lon === n.lon;

components/domain/relative-expiry.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { formatDistanceToNowStrict } from "date-fns";
-import React from "react";
+import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 
 export type RelativeExpiryProps = {
@@ -21,12 +21,10 @@ export function RelativeExpiry({
   warnDays = 30,
   className,
 }: RelativeExpiryProps) {
-  const [text, setText] = React.useState<string | null>(null);
-  const [status, setStatus] = React.useState<"danger" | "warn" | "ok" | null>(
-    null,
-  );
+  const [text, setText] = useState<string | null>(null);
+  const [status, setStatus] = useState<"danger" | "warn" | "ok" | null>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     try {
       const target = new Date(to);
       const now = new Date();

components/domain/screenshot-tooltip.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import type React from "react";
 import type { Mock } from "vitest";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ScreenshotTooltip } from "./screenshot-tooltip";

components/domain/screenshot-tooltip.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import { useState } from "react";
 import {
   Tooltip,
   TooltipContent,
@@ -15,8 +15,8 @@ export function ScreenshotTooltip({
   domain: string;
   children: React.ReactNode;
 }) {
-  const [open, setOpen] = React.useState(false);
-  const [hasOpened, setHasOpened] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const [hasOpened, setHasOpened] = useState(false);
 
   return (
     <Tooltip

components/domain/screenshot.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
+import { createElement } from "react";
 import type { Mock } from "vitest";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Screenshot } from "./screenshot";
@@ -17,7 +17,7 @@ vi.mock("next/image", () => ({
     width: number;
     height: number;
   }) =>
-    React.createElement("img", {
+    createElement("img", {
       alt,
       src,
       width,

components/domain/sections/certificates-section.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { CertificatesSection } from "./certificates-section";
 

components/domain/sections/certificates-section.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowDown } from "lucide-react";
-import React from "react";
+import { Fragment } from "react";
 import { ErrorWithRetry } from "@/components/domain/error-with-retry";
 import { Favicon } from "@/components/domain/favicon";
 import { KeyValue } from "@/components/domain/key-value";
@@ -40,7 +40,7 @@ export function CertificatesSection({
     >
       {data ? (
         data.map((c, idx) => (
-          <React.Fragment key={`cert-${c.subject}-${c.validFrom}-${c.validTo}`}>
+          <Fragment key={`cert-${c.subject}-${c.validFrom}-${c.validTo}`}>
             <div className="relative overflow-hidden rounded-2xl border bg-background/40 backdrop-blur supports-[backdrop-filter]:bg-background/40 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] border-black/10 dark:border-white/10">
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                 <KeyValue
@@ -112,7 +112,7 @@ export function CertificatesSection({
                 <ArrowDown className="h-4 w-4 text-muted-foreground/60" />
               </div>
             )}
-          </React.Fragment>
+          </Fragment>
         ))
       ) : isError ? (
         <ErrorWithRetry

components/domain/sections/dns-records-section.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { DnsRecordsSection } from "./dns-records-section";
 

components/domain/sections/headers-section.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { HeadersSection } from "./headers-section";
 

components/domain/sections/hosting-email-section.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { HostingEmailSection } from "./hosting-email-section";
 

components/domain/sections/registration-section.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { RegistrationSection } from "./registration-section";
 

components/domain/truncated-value.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import React from "react";
+import { createRef } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { TruncatedValue } from "./truncated-value";
 
@@ -29,7 +29,7 @@ vi.mock("@/components/ui/tooltip", () => ({
 
 describe("TruncatedValue", () => {
   it("hides tooltip content when not truncated", () => {
-    const ref = React.createRef<HTMLSpanElement | null>();
+    const ref = createRef<HTMLSpanElement | null>();
     render(
       <TruncatedValue
         value="Example Value"
@@ -45,7 +45,7 @@ describe("TruncatedValue", () => {
   });
 
   it("shows tooltip content when truncated", () => {
-    const ref = React.createRef<HTMLSpanElement | null>();
+    const ref = createRef<HTMLSpanElement | null>();
     render(
       <TruncatedValue
         value="A very long example value"

components/domain/ttl-badge.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import type React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { TtlBadge } from "./ttl-badge";
 

components/logo.tsx

@@ -1,5 +1,3 @@
-import type * as React from "react";
-
 export type LogoProps = React.SVGProps<SVGSVGElement> & {
   title?: string;
 };

components/theme-provider.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import type * as React from "react";
 
 type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>;
 

components/trpc-provider.tsx

@@ -7,13 +7,13 @@ import {
   httpBatchStreamLink,
   loggerLink,
 } from "@trpc/client";
-import * as React from "react";
+import { useState } from "react";
 import superjson from "superjson";
 import { TRPCProvider as Provider } from "@/lib/trpc/client";
 import type { AppRouter } from "@/server/routers/_app";
 
 export function TRPCProvider({ children }: { children: React.ReactNode }) {
-  const [queryClient] = React.useState(
+  const [queryClient] = useState(
     () =>
       new QueryClient({
         defaultOptions: {
@@ -29,7 +29,7 @@ export function TRPCProvider({ children }: { children: React.ReactNode }) {
         },
       }),
   );
-  const [trpcClient] = React.useState(() =>
+  const [trpcClient] = useState(() =>
     createTRPCClient<AppRouter>({
       links: [
         loggerLink({

hooks/use-domain-search.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useParams, useRouter } from "next/navigation";
-import * as React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { z } from "zod";
 import { captureClient } from "@/lib/analytics/client";
@@ -38,7 +38,7 @@ export function useDomainSearch(options: UseDomainSearchOptions = {}) {
   const router = useRouter();
   const params = useParams<{ domain?: string }>();
 
-  const derivedInitial = React.useMemo(() => {
+  const derivedInitial = useMemo(() => {
     if (prefillFromRoute) {
       const raw = params?.domain ? decodeURIComponent(params.domain) : "";
       return normalizeDomainInput(raw);
@@ -46,11 +46,11 @@ export function useDomainSearch(options: UseDomainSearchOptions = {}) {
     return normalizeDomainInput(initialValue);
   }, [prefillFromRoute, params?.domain, initialValue]);
 
-  const [value, setValue] = React.useState<string>(derivedInitial);
-  const [loading, setLoading] = React.useState(false);
-  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState<string>(derivedInitial);
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setValue(derivedInitial);
 
     // Also reset loading on navigation so inputs/buttons re-enable in header variant
@@ -58,7 +58,7 @@ export function useDomainSearch(options: UseDomainSearchOptions = {}) {
   }, [derivedInitial]);
 
   // Optional keyboard shortcut to focus the input (e.g., ⌘/Ctrl + K)
-  React.useEffect(() => {
+  useEffect(() => {
     if (!enableShortcut) return;
     function onKey(e: KeyboardEvent) {
       if (

hooks/use-mobile.ts

@@ -1,13 +1,11 @@
-import * as React from "react";
+import { useEffect, useState } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);