React モダナイゼーション

React のバージョンアップグレード、クラスコンポーネントから Hooks への移行、並行機能の採用、および自動変換のための codemod をマスターしてください。

このスキルを使用する時期

• React アプリケーションを最新バージョンにアップグレードする
• クラスコンポーネントを Hooks を使った関数型コンポーネントに移行する
• 並行 React 機能 (Suspense、transitions) を採用する
• 自動リファクタリングのための codemod を適用する
• 状態管理パターンをモダナイズする
• TypeScript に更新する
• React 18+ の機能でパフォーマンスを向上させる

バージョンアップグレードパス

React 16 → 17 → 18

バージョン別の破壊的変更:

React 17:

• イベントデリゲーションの変更
• イベントプーリングの廃止
• Effect クリーンアップのタイミング変更
• JSX トランスフォーム (React インポート不要)

React 18:

• 自動バッチング
• 並行レンダリング
• Strict Mode の変更 (二重呼び出し)
• 新しいルート API
• サーバー上の Suspense

クラスから Hooks への移行

状態管理

// Before: Class component
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "",
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// After: Functional component with hooks
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

ライフサイクルメソッドから Hooks へ

// Before: Lifecycle methods
class DataFetcher extends React.Component {
  state = { data: null, loading: true };

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.cancelRequest();
  }

  fetchData = async () => {
    const data = await fetch(`/api/${this.props.id}`);
    this.setState({ data, loading: false });
  };

  cancelRequest = () => {
    // Cleanup
  };

  render() {
    if (this.state.loading) return <div>Loading...</div>;
    return <div>{this.state.data}</div>;
  }
}

// After: useEffect hook
function DataFetcher({ id }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    const fetchData = async () => {
      try {
        const response = await fetch(`/api/${id}`);
        const result = await response.json();

        if (!cancelled) {
          setData(result);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error(error);
        }
      }
    };

    fetchData();

    // Cleanup function
    return () => {
      cancelled = true;
    };
  }, [id]); // Re-run when id changes

  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

Context と HOC から Hooks へ

// Before: Context consumer and HOC
const ThemeContext = React.createContext();

class ThemedButton extends React.Component {
  static contextType = ThemeContext;

  render() {
    return (
      <button style={{ background: this.context.theme }}>
        {this.props.children}
      </button>
    );
  }
}

// After: useContext hook
function ThemedButton({ children }) {
  const { theme } = useContext(ThemeContext);

  return <button style={{ background: theme }}>{children}</button>;
}

// Before: HOC for data fetching
function withUser(Component) {
  return class extends React.Component {
    state = { user: null };

    componentDidMount() {
      fetchUser().then((user) => this.setState({ user }));
    }

    render() {
      return <Component {...this.props} user={this.state.user} />;
    }
  };
}

// After: Custom hook
function useUser() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  return user;
}

function UserProfile() {
  const user = useUser();
  if (!user) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

React 18 の並行機能

新しいルート API

// Before: React 17
import ReactDOM from "react-dom";

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

// After: React 18
import { createRoot } from "react-dom/client";

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

自動バッチング

// React 18: All updates are batched
function handleClick() {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // Only one re-render (batched)
}

// Even in async:
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // Still batched in React 18!
}, 1000);

// Opt out if needed
import { flushSync } from "react-dom";

flushSync(() => {
  setCount((c) => c + 1);
});
// Re-render happens here
setFlag((f) => !f);
// Another re-render

トランジション

import { useState, useTransition } from "react";

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

  const handleChange = (e) => {
    // Urgent: Update input immediately
    setQuery(e.target.value);

    // Non-urgent: Update results (can be interrupted)
    startTransition(() => {
      setResults(searchResults(e.target.value));
    });
  };

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

データフェッチングのための Suspense

import { Suspense } from "react";

// Resource-based data fetching (with React 18)
const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileDetails />
      <Suspense fallback={<Loading />}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // This will suspend if data not ready
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  const posts = resource.posts.read();
  return <Timeline posts={posts} />;
}

自動化のための Codemod

React Codemod を実行する

# Rename unsafe lifecycle methods
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/

# Update React imports (React 17+)
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/update-react-imports.js src/

# Add error boundaries
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/error-boundaries.js src/

# For TypeScript files
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/

# Dry run to preview changes
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry --print src/

# Class to Hooks (third-party)
npx codemod react/hooks/convert-class-to-function src/

カスタム Codemod の例

// custom-codemod.js
module.exports = function (file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);

  // Find setState calls
  root
    .find(j.CallExpression, {
      callee: {
        type: "MemberExpression",
        property: { name: "setState" },
      },
    })
    .forEach((path) => {
      // Transform to useState
      // ... transformation logic
    });

  return root.toSource();
};

// Run: jscodeshift -t custom-codemod.js src/

パフォーマンス最適化

useMemo と useCallback

function ExpensiveComponent({ items, filter }) {
  // Memoize expensive calculation
  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === filter);
  }, [items, filter]);

  // Memoize callback to prevent child re-renders
  const handleClick = useCallback((id) => {
    console.log("Clicked:", id);
  }, []); // No dependencies, never changes

  return <List items={filteredItems} onClick={handleClick} />;
}

// Child component with memo
const List = React.memo(({ items, onClick }) => {
  return items.map((item) => (
    <Item key={item.id} item={item} onClick={onClick} />
  ));
});

コード分割

import { lazy, Suspense } from "react";

// Lazy load components
const Dashboard = lazy(() => import("./Dashboard"));
const Settings = lazy(() => import("./Settings"));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

TypeScript への移行

// Before: JavaScript
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// After: TypeScript
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>;
}

// Generic components
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <>{items.map(renderItem)}</>;
}

移行チェックリスト

### 移行前

- [ ] 依存関係を段階的に更新する (すべてを一度にはしない)
- [ ] リリースノートの破壊的変更を確認する
- [ ] テストスイートをセットアップする
- [ ] フィーチャーブランチを作成する

### Class → Hooks への移行

- [ ] 移行するクラスコンポーネントを識別する
- [ ] リーフコンポーネント (子なし) から始める
- [ ] 状態を useState に変換する
- [ ] ライフサイクルを useEffect に変換する
- [ ] Context を useContext に変換する
- [ ] カスタム Hooks を抽出する
- [ ] 徹底的にテストする

### React 18 アップグレード

- [ ] 必要に応じて React 17 に更新する
- [ ] react と react-dom を 18 に更新する
- [ ] TypeScript を使用している場合は @types/react を更新する
- [ ] createRoot API に変更する
- [ ] StrictMode でテストする (二重呼び出し)
- [ ] 並行レンダリングの問題に対処する
- [ ] 有益な場所で Suspense/Transitions を採用する

### パフォーマンス

- [ ] パフォーマンスのボトルネックを特定する
- [ ] 適切な場所に React.memo を追加する
- [ ] 高コストな操作に useMemo/useCallback を使用する
- [ ] コード分割を実装する
- [ ] 再レンダリングを最適化する

### テスト

- [ ] テストユーティリティを更新する (React Testing Library)
- [ ] React 18 機能でテストする
- [ ] コンソールの警告を確認する
- [ ] パフォーマンステスト