import { Profiler } from 'react'

function onRenderCallback(
  id,             // "displayName" Profiler
  phase,          // "mount" или "update"
  actualDuration, // время рендеринга в мс
  baseDuration,   // расчётное время без мемоизации
  startTime,      // когда React начал рендеринг
  commitTime      // когда React зафиксировал рендеринг
) {
  console.log(`[${id}] ${phase}: ${actualDuration.toFixed(2)}мс`)
}

function App() {
  return (
    <Profiler id="Navigation" onRender={onRenderCallback}>
      <Navigation />
    </Profiler>
  )
}

// src/wdyr.ts (только для разработки)
import React from 'react'

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render')
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    // Или точечно для конкретного компонента:
    // logOwnerReasons: true,
  })
}

// Включить для конкретного компонента
MyComponent.whyDidYouRender = true

// why-did-you-render покажет:
// [MyList] Re-rendered. Причина: изменились пропсы
// Предыдущие: { items: Array(3) }
// Текущие:    { items: Array(3) }  ← ОДИНАКОВЫЕ! Значение то же, но новая ссылка

# Для Create React App
npx source-map-explorer 'build/static/js/*.js'

# Для Vite
npm install rollup-plugin-visualizer -D

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [
    visualizer({
      filename: 'stats.html',
      open: true,
      gzipSize: true,
    })
  ]
}

import { lazy, Suspense } from 'react'

// Ленивая загрузка: компонент загрузится только когда понадобится
const HeavyChart = lazy(() => import('./HeavyChart'))
const AdminPanel = lazy(() => import('./AdminPanel'))

function App() {
  const isAdmin = useUser().role === 'admin'

  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <HeavyChart data={chartData} />
      {isAdmin && <AdminPanel />}
    </Suspense>
  )
}

// Роутинг с ленивой загрузкой страниц
const HomePage = lazy(() => import('./pages/HomePage'))
const BlogPage = lazy(() => import('./pages/BlogPage'))
const ProfilePage = lazy(() => import('./pages/ProfilePage'))

function Router() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/blog" element={<BlogPage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </Suspense>
  )
}

npm install babel-plugin-react-compiler -D

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      target: '18',  // совместимость с React 18
    }]
  ]
}

// До React Compiler (ручная мемоизация)
function ProductList({ products, onBuy }) {
  const sorted = useMemo(
    () => [...products].sort((a, b) => a.price - b.price),
    [products]
  )
  const handleBuy = useCallback(
    (id) => onBuy(id),
    [onBuy]
  )
  return sorted.map(p => <Product key={p.id} product={p} onBuy={handleBuy} />)
}

// После React Compiler — он добавит мемоизацию автоматически!
function ProductList({ products, onBuy }) {
  const sorted = [...products].sort((a, b) => a.price - b.price)
  return sorted.map(p => <Product key={p.id} product={p} onBuy={(id) => onBuy(id)} />)
}

// 1. Виртуализация списков (react-virtual или react-window)
import { useVirtualizer } from '@tanstack/react-virtual'

function BigList({ items }) {
  const parentRef = useRef(null)
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
  })

  return (
    <div ref={parentRef} style={{ height: 400, overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{ transform: `translateY(${virtualRow.start}px)` }}
          >
            {items[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  )
}

// 2. Дебаунс для часто срабатывающих обработчиков
function SearchInput() {
  const [query, setQuery] = useState('')
  const debouncedSearch = useMemo(
    () => debounce((q) => fetchResults(q), 300),
    []
  )

  return (
    <input
      value={query}
      onChange={e => {
        setQuery(e.target.value)
        debouncedSearch(e.target.value)
      }}
    />
  )
}