# Check your current React version
npm list react react-dom

# Check for deprecated patterns
npx @next/codemod --help

# Analyze your codebase for potential issues
npx @typescript-eslint/parser --version

# Create a backup branch
git checkout -b migration-backup
git add .
git commit -m "Backup before React 19 migration"

# Create a new migration branch
git checkout -b react-19-migration

# Optional: Create a separate branch for testing
git checkout -b react-19-testing

# Update React and React DOM
npm install react@latest react-dom@latest

# Update related packages
npm install @types/react@latest @types/react-dom@latest

# Update testing libraries if needed
npm install @testing-library/react@latest @testing-library/jest-dom@latest

# Update build tools
npm install next@latest # if using Next.js
npm install vite@latest # if using Vite

# Update ESLint and TypeScript
npm install eslint@latest @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest

{
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^15.0.0" // if applicable
  },
  "devDependencies": {
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "typescript": "^5.6.0", // if using TypeScript
    "eslint": "^9.0.0",
    "@typescript-eslint/parser": "^8.0.0",
    "@typescript-eslint/eslint-plugin": "^8.0.0"
  }
}

npm install

# Clean node_modules and reinstall if issues occur
rm -rf node_modules package-lock.json
npm install

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["DOM", "DOM.Iterable", "ES6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "incremental": true,
    "tsBuildInfoFile": "node_modules/.cache/tsconfig.tsbuildinfo"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

// .eslintrc.js or eslint.config.js
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parser: "@typescript-eslint/parser",
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
  },
};

// Before (React 18)
import { StrictMode } from "react";

function App() {
  return (
    <StrictMode>
      <MyApp />
    </StrictMode>
  );
}

// After (React 19) - Concurrent features enabled by default
import { StrictMode } from "react";

function App() {
  return (
    <StrictMode>
      <MyApp />
    </StrictMode>
  );
}

// Before (React 18)
useEffect(() => {
  const timer = setTimeout(() => {
    console.log("Done!");
  }, 1000);

  return () => {
    clearTimeout(timer);
  };
}, []);

// After (React 19) - Same, but stricter enforcement
useEffect(() => {
  const timer = setTimeout(() => {
    console.log("Done!");
  }, 1000);

  return () => {
    clearTimeout(timer);
  };
}, []);

// Enhanced cleanup pattern for React 19
useEffect(() => {
  let isMounted = true;

  const fetchData = async () => {
    try {
      const response = await fetch("/api/data");
      if (isMounted) {
        const data = await response.json();
        setData(data);
      }
    } catch (error) {
      if (isMounted) {
        setError(error);
      }
    }
  };

  fetchData();

  return () => {
    isMounted = false;
  };
}, []);

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // React 19 provides more detailed errorInfo
    console.error("Error caught by boundary:", error, errorInfo);

    // Log to error reporting service
    if (typeof window !== "undefined" && window.errorReporter) {
      window.errorReporter.captureException(error, {
        extra: {
          componentStack: errorInfo.componentStack,
          errorBoundary: this.props.name || "Unknown",
        },
      });
    }

    this.setState({
      error,
      errorInfo,
    });
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null, errorInfo: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>Something went wrong</h2>
          <details>
            <summary>Error Details (Development)</summary>
            <pre>{this.state.error && this.state.error.toString()}</pre>
            <pre>{this.state.errorInfo.componentStack}</pre>
          </details>
          <button onClick={this.handleRetry}>Try Again</button>
        </div>
      );
    }

    return this.props.children;
  }
}

// Usage with error boundary
function App() {
  return (
    <ErrorBoundary name="App">
      <Header />
      <ErrorBoundary name="MainContent">
        <MainContent />
      </ErrorBoundary>
      <Footer />
    </ErrorBoundary>
  );
}

// Before (React 18) - Manual optimistic updates
function TodoList() {
  const [todos, setTodos] = useState([]);
  const [isAdding, setIsAdding] = useState(false);

  const addTodo = async (text) => {
    setIsAdding(true);
    const tempId = Date.now();
    const optimisticTodo = { id: tempId, text, completed: false };

    // Optimistic update
    setTodos((prev) => [...prev, optimisticTodo]);

    try {
      const newTodo = await api.addTodo(text);
      // Replace optimistic with real data
      setTodos((prev) => prev.map((todo) => (todo.id === tempId ? newTodo : todo)));
    } catch (error) {
      // Revert on error
      setTodos((prev) => prev.filter((todo) => todo.id !== tempId));
      console.error("Failed to add todo:", error);
    } finally {
      setIsAdding(false);
    }
  };

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} disabled={isAdding} />
      <button onClick={() => addTodo(text)} disabled={isAdding}>
        {isAdding ? "Adding..." : "Add Todo"}
      </button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

// After (React 19) - useOptimistic hook
import { useOptimistic } from "react";

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, setOptimisticTodos] = useOptimistic(todos);

  const addTodo = async (text) => {
    const optimisticTodo = {
      id: Date.now(),
      text,
      completed: false,
      isOptimistic: true,
    };

    // Add optimistic update
    setOptimisticTodos((prev) => [...prev, optimisticTodo]);

    try {
      const newTodo = await api.addTodo(text);
      // Replace with real data
      setTodos((prev) => [...prev, newTodo]);
    } catch (error) {
      // Remove optimistic update on error
      setOptimisticTodos((prev) => prev.filter((todo) => todo.id !== optimisticTodo.id));
      console.error("Failed to add todo:", error);
    }
  };

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={() => addTodo(text)}>Add Todo</button>
      <ul>
        {optimisticTodos.map((todo) => (
          <li
            key={todo.id}
            style={{
              opacity: todo.isOptimistic ? 0.7 : 1,
              fontStyle: todo.isOptimistic ? "italic" : "normal",
            }}
          >
            {todo.text}
            {todo.isOptimistic && " (saving...)"}
          </li>
        ))}
      </ul>
    </div>
  );
}

// Before (React 18) - Blocking search
function SearchComponent({ data }) {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    const filtered = data.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()));
    setResults(filtered);
  }, [query, data]);

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search..." />
      <ResultsList results={results} />
    </div>
  );
}

// After (React 19) - Non-blocking search with useDeferredValue
import { useDeferredValue, useMemo } from "react";

function SearchComponent({ data }) {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);

  const results = useMemo(() => {
    // Expensive operation uses deferred value
    return data.filter((item) => item.name.toLowerCase().includes(deferredQuery.toLowerCase()));
  }, [deferredQuery, data]);

  const isStale = query !== deferredQuery;

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search..." />

      {/* Show current query immediately */}
      <div>Searching for: "{query}"</div>

      {/* Show stale indicator */}
      {isStale && <div style={{ color: "orange" }}>Updating results for "{query}"...</div>}

      <ResultsList results={results} />
    </div>
  );
}

// Advanced search with multiple deferred values
function AdvancedSearch({ data }) {
  const [query, setQuery] = useState("");
  const [filters, setFilters] = useState({});
  const [sortBy, setSortBy] = useState("name");

  // Defer expensive operations
  const deferredQuery = useDeferredValue(query);
  const deferredFilters = useDeferredValue(filters);
  const deferredSortBy = useDeferredValue(sortBy);

  const processedResults = useMemo(() => {
    let results = data;

    // Apply search filter
    if (deferredQuery) {
      results = results.filter((item) =>
        item.name.toLowerCase().includes(deferredQuery.toLowerCase())
      );
    }

    // Apply additional filters
    Object.entries(deferredFilters).forEach(([key, value]) => {
      if (value) {
        results = results.filter((item) => item[key] === value);
      }
    });

    // Apply sorting
    results.sort((a, b) => {
      if (deferredSortBy === "name") {
        return a.name.localeCompare(b.name);
      }
      return a[deferredSortBy] - b[deferredSortBy];
    });

    return results;
  }, [data, deferredQuery, deferredFilters, deferredSortBy]);

  const isStale =
    query !== deferredQuery ||
    JSON.stringify(filters) !== JSON.stringify(deferredFilters) ||
    sortBy !== deferredSortBy;

  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      <FilterControls filters={filters} onChange={setFilters} />
      <SortControls value={sortBy} onChange={setSortBy} />

      {isStale && <div>Processing...</div>}

      <ResultsList results={processedResults} />
    </div>
  );
}

// Before (React 18) - Manual loading states
function TabComponent({ tabs }) {
  const [activeTab, setActiveTab] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  const switchTab = async (index) => {
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 100)); // Simulate loading
    setActiveTab(index);
    setIsLoading(false);
  };

  return (
    <div>
      {tabs.map((tab, index) => (
        <button key={index} onClick={() => switchTab(index)} disabled={isLoading}>
          {tab.title}
        </button>
      ))}
      {isLoading ? <div>Loading...</div> : <TabContent content={tabs[activeTab].content} />}
    </div>
  );
}

// After (React 19) - useTransition for smooth transitions
import { useTransition } from "react";

function TabComponent({ tabs }) {
  const [activeTab, setActiveTab] = useState(0);
  const [isPending, startTransition] = useTransition();

  const switchTab = (index) => {
    startTransition(() => {
      setActiveTab(index);
    });
  };

  return (
    <div>
      {tabs.map((tab, index) => (
        <button key={index} onClick={() => switchTab(index)} disabled={isPending}>
          {tab.title}
          {isPending && activeTab === index && " (Loading...)"}
        </button>
      ))}

      <Suspense fallback={<TabSkeleton />}>
        <TabContent content={tabs[activeTab].content} />
      </Suspense>
    </div>
  );
}

// Advanced useTransition with multiple concurrent operations
function DataDashboard() {
  const [data, setData] = useState(null);
  const [filters, setFilters] = useState({});
  const [sortConfig, setSortConfig] = useState(null);

  const [isPending, startTransition] = useTransition();

  const updateFilters = (newFilters) => {
    startTransition(() => {
      setFilters(newFilters);
    });
  };

  const updateSort = (newSort) => {
    startTransition(() => {
      setSortConfig(newSort);
    });
  };

  const refreshData = () => {
    startTransition(async () => {
      const newData = await fetchDashboardData();
      setData(newData);
    });
  };

  return (
    <div>
      <div className="controls">
        <FilterPanel filters={filters} onChange={updateFilters} disabled={isPending} />
        <SortPanel config={sortConfig} onChange={updateSort} disabled={isPending} />
        <button onClick={refreshData} disabled={isPending}>
          {isPending ? "Refreshing..." : "Refresh Data"}
        </button>
      </div>

      {isPending && <div className="loading-overlay">Updating...</div>}

      <DashboardContent data={data} filters={filters} sortConfig={sortConfig} />
    </div>
  );
}

// Update test imports
import { render, screen, waitFor, fireEvent, act } from "@testing-library/react";
import { useOptimistic, useDeferredValue, useTransition } from "react";

// Test useOptimistic
describe("useOptimistic", () => {
  test("optimistic updates work correctly", async () => {
    const TestComponent = () => {
      const [state, setState] = useState("initial");
      const [optimisticState, setOptimisticState] = useOptimistic(state);

      const handleUpdate = () => {
        setOptimisticState("updated");
        // Simulate async operation
        setTimeout(() => setState("updated"), 100);
      };

      return (
        <div>
          <div data-testid="optimistic">{optimisticState}</div>
          <div data-testid="actual">{state}</div>
          <button onClick={handleUpdate}>Update</button>
        </div>
      );
    };

    render(<TestComponent />);

    expect(screen.getByTestId("optimistic")).toHaveTextContent("initial");
    expect(screen.getByTestId("actual")).toHaveTextContent("initial");

    fireEvent.click(screen.getByText("Update"));

    // Optimistic update should be immediate
    expect(screen.getByTestId("optimistic")).toHaveTextContent("updated");
    expect(screen.getByTestId("actual")).toHaveTextContent("initial");

    // Wait for actual update
    await waitFor(() => {
      expect(screen.getByTestId("actual")).toHaveTextContent("updated");
    });
  });

  test("reverts optimistic update on error", async () => {
    const TestComponent = () => {
      const [state, setState] = useState("initial");
      const [optimisticState, setOptimisticState] = useOptimistic(state);

      const handleFailingUpdate = () => {
        setOptimisticState("updated");
        // Simulate failed operation
        setTimeout(() => {
          setOptimisticState("initial"); // Revert
        }, 100);
      };

      return (
        <div>
          <div data-testid="optimistic">{optimisticState}</div>
          <button onClick={handleFailingUpdate}>Failing Update</button>
        </div>
      );
    };

    render(<TestComponent />);

    fireEvent.click(screen.getByText("Failing Update"));
    expect(screen.getByTestId("optimistic")).toHaveTextContent("updated");

    await waitFor(() => {
      expect(screen.getByTestId("optimistic")).toHaveTextContent("initial");
    });
  });
});

// Test useDeferredValue
describe("useDeferredValue", () => {
  test("deferred value updates correctly", async () => {
    const TestComponent = ({ value }) => {
      const deferredValue = useDeferredValue(value);
      return (
        <div>
          <div data-testid="current">{value}</div>
          <div data-testid="deferred">{deferredValue}</div>
        </div>
      );
    };

    const { rerender } = render(<TestComponent value="initial" />);

    expect(screen.getByTestId("current")).toHaveTextContent("initial");
    expect(screen.getByTestId("deferred")).toHaveTextContent("initial");

    // Update value
    rerender(<TestComponent value="updated" />);

    // Current value updates immediately
    expect(screen.getByTestId("current")).toHaveTextContent("updated");

    // Deferred value might still be old initially
    // In a real test, you might need to wait for the next tick
    await act(async () => {
      await new Promise((resolve) => setTimeout(resolve, 0));
    });

    expect(screen.getByTestId("deferred")).toHaveTextContent("updated");
  });

  test("shows stale state correctly", () => {
    const TestComponent = ({ value }) => {
      const deferredValue = useDeferredValue(value);
      const isStale = value !== deferredValue;

      return (
        <div>
          <div data-testid="stale">{isStale ? "stale" : "fresh"}</div>
        </div>
      );
    };

    const { rerender } = render(<TestComponent value="initial" />);
    expect(screen.getByTestId("stale")).toHaveTextContent("fresh");

    rerender(<TestComponent value="updated" />);
    // Initially stale
    expect(screen.getByTestId("stale")).toHaveTextContent("stale");
  });
});

// Test useTransition
describe("useTransition", () => {
  test("provides loading state during transitions", async () => {
    const TestComponent = () => {
      const [count, setCount] = useState(0);
      const [isPending, startTransition] = useTransition();

      const handleClick = () => {
        startTransition(() => {
          setCount((c) => c + 1);
        });
      };

      return (
        <div>
          <button onClick={handleClick}>Increment</button>
          <div data-testid="count">{count}</div>
          <div data-testid="pending">{isPending ? "pending" : "idle"}</div>
        </div>
      );
    };

    render(<TestComponent />);

    expect(screen.getByTestId("count")).toHaveTextContent("0");
    expect(screen.getByTestId("pending")).toHaveTextContent("idle");

    fireEvent.click(screen.getByText("Increment"));

    // Should show pending state
    expect(screen.getByTestId("pending")).toHaveTextContent("pending");

    // Wait for transition to complete
    await waitFor(() => {
      expect(screen.getByTestId("count")).toHaveTextContent("1");
      expect(screen.getByTestId("pending")).toHaveTextContent("idle");
    });
  });

  test("handles multiple concurrent transitions", async () => {
    const TestComponent = () => {
      const [value, setValue] = useState("");
      const [isPending, startTransition] = useTransition();

      const handleChange = (newValue) => {
        startTransition(() => {
          setValue(newValue);
        });
      };

      return (
        <div>
          <input data-testid="input" value={value} onChange={(e) => handleChange(e.target.value)} />
          <div data-testid="pending">{isPending ? "updating" : "ready"}</div>
        </div>
      );
    };

    render(<TestComponent />);

    const input = screen.getByTestId("input");

    // Rapid typing should trigger pending state
    fireEvent.change(input, { target: { value: "h" } });
    fireEvent.change(input, { target: { value: "he" } });
    fireEvent.change(input, { target: { value: "hel" } });
    fireEvent.change(input, { target: { value: "hell" } });
    fireEvent.change(input, { target: { value: "hello" } });

    expect(screen.getByTestId("pending")).toHaveTextContent("updating");

    await waitFor(() => {
      expect(screen.getByTestId("input")).toHaveValue("hello");
      expect(screen.getByTestId("pending")).toHaveTextContent("ready");
    });
  });
});

// Integration tests
describe("React 19 Integration", () => {
  test("complex interaction with multiple hooks", async () => {
    const ComplexComponent = () => {
      const [query, setQuery] = useState("");
      const [optimisticQuery, setOptimisticQuery] = useOptimistic(query);
      const deferredQuery = useDeferredValue(optimisticQuery);
      const [isPending, startTransition] = useTransition();

      const results = useMemo(() => {
        return ["apple", "banana", "cherry"].filter((item) => item.includes(deferredQuery));
      }, [deferredQuery]);

      const handleSearch = (newQuery) => {
        setOptimisticQuery(newQuery);
        startTransition(() => {
          setQuery(newQuery);
        });
      };

      return (
        <div>
          <input
            data-testid="search"
            value={query}
            onChange={(e) => handleSearch(e.target.value)}
          />
          <div data-testid="pending">{isPending ? "searching" : "ready"}</div>
          <ul data-testid="results">
            {results.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      );
    };

    render(<ComplexComponent />);

    const searchInput = screen.getByTestId("search");

    fireEvent.change(searchInput, { target: { value: "a" } });

    expect(screen.getByTestId("pending")).toHaveTextContent("searching");

    await waitFor(() => {
      expect(screen.getByTestId("results")).toHaveTextContent("apple");
      expect(screen.getByTestId("results")).toHaveTextContent("banana");
      expect(screen.getByTestId("pending")).toHaveTextContent("ready");
    });
  });
});

// jest.config.js
module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
  testMatch: [
    "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
    "<rootDir>/src/**/*.{test,spec}.{js,jsx,ts,tsx}",
  ],
  moduleNameMapping: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
  },
  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

// src/setupTests.js
import "@testing-library/jest-dom";

// Mock fetch for API calls
global.fetch = jest.fn();

// Mock ResizeObserver
global.ResizeObserver = jest.fn().mockImplementation(() => ({
  observe: jest.fn(),
  unobserve: jest.fn(),
  disconnect: jest.fn(),
}));

// Mock IntersectionObserver
global.IntersectionObserver = jest.fn().mockImplementation(() => ({
  observe: jest.fn(),
  unobserve: jest.fn(),
  disconnect: jest.fn(),
}));

// Cleanup after each test
afterEach(() => {
  jest.clearAllMocks();
});

// next.config.js (for Next.js)
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

// For Vite
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler', {}]],
      },
    }),
  ],
});

// For Create React App
// Add to package.json
{
  "babel": {
    "plugins": [["babel-plugin-react-compiler", {}]]
  }
}

# Analyze bundle size
npm install --save-dev webpack-bundle-analyzer
npx webpack-bundle-analyzer dist/static/js/*.js

# Check for unused dependencies
npm install --save-dev depcheck
npx depcheck

# Optimize React imports
// Instead of: import React from 'react'
// Use: import { useState } from 'react'

// Add performance monitoring
import { useEffect } from "react";

function PerformanceMonitor() {
  useEffect(() => {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === "measure") {
          console.log(`${entry.name}: ${entry.duration}ms`);
        }
      }
    });

    observer.observe({ entryTypes: ["measure"] });

    return () => observer.disconnect();
  }, []);

  return null;
}

// Web Vitals monitoring
function WebVitalsMonitor() {
  useEffect(() => {
    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(console.log);
      getFID(console.log);
      getFCP(console.log);
      getLCP(console.log);
      getTTFB(console.log);
    });
  }, []);

  return null;
}

// Usage in App
function App() {
  return (
    <div>
      <PerformanceMonitor />
      <WebVitalsMonitor />
      {/* Your app content */}
    </div>
  );
}

// Optimize components for concurrent rendering
function OptimizedList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item.id} style={{ contain: "layout" }}>
          <Suspense fallback={<ItemSkeleton />}>
            <ListItem item={item} priority={index < 5 ? "high" : "low"} />
          </Suspense>
        </li>
      ))}
    </ul>
  );
}

// Use React.memo for expensive components
const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
  const processedData = useMemo(() => {
    return expensiveComputation(data);
  }, [data]);

  return <div>{processedData}</div>;
});

// Optimize context usage
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  const contextValue = useMemo(
    () => ({
      theme,
      setTheme,
    }),
    [theme]
  );

  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
}

// Use useEffect for client-only code
function ClientOnlyComponent() {
  const [isClient, setIsClient] = useState(false);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setIsClient(true);
    setMounted(true);
  }, []);

  if (!mounted) {
    return <div>Loading...</div>; // or skeleton
  }

  return <div>Client-only content</div>;
}

// For dynamic content that changes
function DynamicContent({ serverData }) {
  const [clientData, setClientData] = useState(serverData);

  useEffect(() => {
    // Fetch fresh data on client
    fetchFreshData().then(setClientData);
  }, []);

  return <div>{clientData}</div>;
}

import { useEffect, useLayoutEffect } from "react";

function useIsomorphicLayoutEffect() {
  return typeof window !== "undefined" ? useLayoutEffect : useEffect;
}

function MyComponent() {
  const isomorphicLayoutEffect = useIsomorphicLayoutEffect();

  isomorphicLayoutEffect(() => {
    // Your layout effect code
  }, []);
}

// Or conditionally use different hooks
function MyComponent() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  useLayoutEffect(() => {
    if (!mounted) return;

    // Layout effect code that requires DOM
    const element = document.getElementById("my-element");
    // ... layout calculations
  }, [mounted]);
}

// Temporarily disable concurrent features for problematic components
import { unstable_noStore } from "next/cache"; // Next.js

function NonConcurrentComponent() {
  unstable_noStore(); // Disable caching for this component

  // Your existing code that doesn't work with concurrency
}

// Use startTransition for controlled concurrency
function SafeComponent() {
  const [isPending, startTransition] = useTransition();

  const handleUpdate = (newData) => {
    startTransition(() => {
      setData(newData);
    });
  };

  return (
    <div>
      {isPending && <div>Updating...</div>}
      <button onClick={() => handleUpdate(data)}>Update</button>
    </div>
  );
}

// Update type definitions
interface MyComponentProps {
  children: React.ReactNode; // More specific than ReactNode
  onChange?: (value: string) => void;
}

// Use proper event types
function MyInput({ onChange }: { onChange?: (value: string) => void }) {
  return (
    <input
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        onChange?.(e.target.value);
      }}
    />
  );
}

// Handle async components
type AsyncComponentProps = {
  data: Promise<DataType>;
};

function AsyncComponent({ data }: AsyncComponentProps) {
  const [resolvedData, setResolvedData] = useState<DataType | null>(null);

  useEffect(() => {
    data.then(setResolvedData);
  }, [data]);

  if (!resolvedData) return <div>Loading...</div>;

  return <div>{resolvedData.name}</div>;
}

function SafeOptimisticComponent() {
  const [data, setData] = useState([]);
  const [optimisticData, setOptimisticData] = useOptimistic(data);

  const addItem = useCallback(async (item) => {
    const optimisticItem = { ...item, id: Date.now(), isOptimistic: true };

    setOptimisticData((prev) => [...prev, optimisticItem]);

    try {
      const savedItem = await api.saveItem(item);
      setData((prev) => [...prev, savedItem]);
    } catch (error) {
      // Remove optimistic item
      setOptimisticData((prev) => prev.filter((i) => i.id !== optimisticItem.id));
    }
  }, []);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      // Any cleanup needed for optimistic updates
    };
  }, []);
}

// Use selective imports
import { useState, useEffect } from "react"; // Instead of import React from 'react'

// Tree shaking configuration
// webpack.config.js
module.exports = {
  optimization: {
    usedExports: true,
    sideEffects: true,
  },
};

// Dynamic imports for large components
const HeavyComponent = lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// Use act() for state updates
import { act } from "@testing-library/react";

test("handles concurrent updates", async () => {
  const { result } = renderHook(() => {
    const [count, setCount] = useState(0);
    const [isPending, startTransition] = useTransition();

    const increment = () => {
      startTransition(() => {
        setCount((c) => c + 1);
      });
    };

    return { count, isPending, increment };
  });

  act(() => {
    result.current.increment();
  });

  expect(result.current.isPending).toBe(true);

  await waitFor(() => {
    expect(result.current.count).toBe(1);
    expect(result.current.isPending).toBe(false);
  });
});

// Mock timers for deferred values
test("useDeferredValue with timers", async () => {
  jest.useFakeTimers();

  const { result, rerender } = renderHook(({ value }) => useDeferredValue(value), {
    initialProps: { value: "initial" },
  });

  rerender({ value: "updated" });

  // Fast-forward timers
  act(() => {
    jest.advanceTimersByTime(0);
  });

  expect(result.current).toBe("updated");
});

# Quick rollback to React 18
npm install react@^18.2.0 react-dom@^18.2.0 @types/react@^18.2.0 @types/react-dom@^18.2.0

# Revert specific changes
git revert <commit-hash>

# Or rollback entire migration
git reset --hard <backup-branch>

# For Next.js projects
npm install next@^14.0.0 # Latest stable v14

// Feature flags for gradual rollback
const REACT_19_FEATURES = {
  useOptimistic: true,
  useDeferredValue: true,
  useTransition: true,
  concurrentRendering: true,
};

// Conditionally enable features
function useConditionalOptimistic(initialValue) {
  return REACT_19_FEATURES.useOptimistic ? useOptimistic(initialValue) : initialValue;
}

// Performance metrics to track
const successMetrics = {
  // Core Web Vitals
  firstContentfulPaint: true,
  largestContentfulPaint: true,
  firstInputDelay: true,
  cumulativeLayoutShift: true,

  // React-specific metrics
  bundleSize: true,
  runtimeErrors: true,
  hydrationTime: true,
  concurrentRenderingUsage: true,

  // User experience
  timeToInteractive: true,
  userSatisfactionScore: true,
  errorRate: true,
};

// Monitoring setup
function MigrationMonitor() {
  useEffect(() => {
    // Track migration success
    if (typeof window !== "undefined") {
      window.gtag("event", "react_19_migration", {
        event_category: "migration",
        event_label: "successful_upgrade",
        value: 1,
      });
    }
  }, []);

  return null;
}