// React 18 之前
import { render } from 'react-dom';

render(<App />, document.getElementById('root'));

// React 18
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

// React 18 會自動批次處理這些更新
function handleClick() {
  fetch('/api/data').then(() => {
    setCount(c => c + 1);  // 不會立即重新渲染
    setFlag(f => !f);      // 不會立即重新渲染
    // React 只會在最後重新渲染一次
  });
}

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // React 此時已經更新 DOM
  flushSync(() => {
    setFlag(f => !f);
  });
  // React 再次更新 DOM
}

import { useTransition, useState } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value);  // 緊急更新：顯示輸入

    startTransition(() => {
      // 非緊急更新：顯示結果
      setResults(filterResults(value));
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <ResultsList results={results} />
    </div>
  );
}

import { Suspense, lazy } from 'react';

const Comments = lazy(() => import('./Comments'));

function Post() {
  return (
    <div>
      <PostContent />
      <Suspense fallback={<Spinner />}>
        <Comments />
      </Suspense>
    </div>
  );
}

function SearchBox() {
  const [isPending, startTransition] = useTransition();
  const [input, setInput] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const handleChange = (e) => {
    setInput(e.target.value);
    
    startTransition(() => {
      // 這個更新不會阻塞輸入
      const filtered = filterSuggestions(e.target.value);
      setSuggestions(filtered);
    });
  };

  return (
    <div>
      <input 
        value={input} 
        onChange={handleChange}
        className={isPending ? 'loading' : ''}
      />
      <SuggestionList items={suggestions} />
    </div>
  );
}

function ProfilePage({ userId }) {
  return (
    <div>
      <Suspense fallback={<ProfileSkeleton />}>
        <ProfileDetails userId={userId} />
        <Suspense fallback={<PostsSkeleton />}>
          <ProfilePosts userId={userId} />
        </Suspense>
      </Suspense>
    </div>
  );
}

// 這些函數會被調用兩次（僅開發環境）
- 函數元件本體
- useState、useReducer、useMemo 的初始化函數
- Class 元件的 constructor、render 等

// tailwind.config.js
module.exports = {
  darkMode: 'media', // 根據系統偏好
  // ...
}

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 手動控制
  // ...
}

// tailwind.config.js
module.exports = {
  darkMode: ['selector', '[data-mode="dark"]'],
  // ...
}

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // 自訂顏色變數
        primary: "#2b7cee",
        "background-light": "#f8fafc",
        "surface-light": "#ffffff",
        // ...深色模式顏色會自動處理
      },
    },
  },
  plugins: [],
}

// 監聽其他分頁的變化
window.addEventListener('storage', (e) => {
  if (e.key === 'darkMode') {
    const isDark = e.newValue === 'true';
    document.documentElement.classList.toggle('dark', isDark);
  }
});

// 統一的 Storage Key
const THEME_KEY = 'app-theme-preference';

// 好的對比度
text-gray-900 dark:text-gray-100

// 避免這樣（對比度不足）
text-gray-700 dark:text-gray-400

// tailwind.config.js
theme: {
  extend: {
    colors: {
      'text-primary': 'rgb(15 23 42)', // slate-900
      'text-secondary': 'rgb(100 116 139)', // slate-500
      'surface': 'rgb(255 255 255)',
    },
  },
}

// cypress/e2e/dark-mode.cy.js
describe('Dark Mode', () => {
  it('應該能切換深色模式', () => {
    cy.visit('/');
    
    // 預設應該是淺色
    cy.get('html').should('not.have.class', 'dark');
    
    // 點擊切換按鈕
    cy.get('[aria-label="Toggle Dark Mode"]').click();
    
    // 應該變成深色
    cy.get('html').should('have.class', 'dark');
    
    // localStorage 應該已儲存
    cy.window().then((win) => {
      expect(win.localStorage.getItem('darkMode')).to.equal('true');
    });
  });
});

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // Tailwind 會自動移除未使用的深色模式 class
}

// 使用 CSS 變數減少重排
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

.dark {
  --bg-color: #1a1a1a;
  --text-color: #ffffff;
}

useEffect(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  
  const handleChange = (e: MediaQueryListEvent) => {
    if (!localStorage.getItem('darkMode')) {
      setTheme(e.matches ? 'dark' : 'light');
    }
  };
  
  mediaQuery.addEventListener('change', handleChange);
  return () => mediaQuery.removeEventListener('change', handleChange);
}, []);