React useState と React Native Redux 比較

1. 基本概念の違い

React useState

• コンポーネント内でのローカルな状態管理
• シンプルで直感的な実装
• 小規模なアプリケーションに適している

React Native Redux

• アプリケーション全体でのグローバルな状態管理
• 構造化された状態管理
• 大規模なアプリケーションに適している

2. コード比較

React (useState) の実装

// App.js
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

React Native + Redux の実装

// redux/counterSlice.js
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: (state) => { state.count += 1 },
    decrement: (state) => { state.count -= 1 }
  }
});

// components/Counter.js
function Counter() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();
  
  return (
    <View>
      <Text>{count}</Text>
      <TouchableOpacity onPress={() => dispatch(increment())}>
        <Text>+</Text>
      </TouchableOpacity>
    </View>
  );
}

3. 対応関係表

React (useState)	React Native + Redux	説明
useState(0)	initialState: { count: 0 }	初期状態の設定
count	useSelector((state) => state.counter.count)	状態の取得
setCount	useDispatch() + dispatch(action)	状態の更新
setCount(count + 1)	dispatch(increment())	状態更新の実行

4. プロジェクト構造

project/
├── components/          # UIコンポーネント
│   └── Counter.js      # カウンター表示と操作
├── redux/              # 状態管理
│   └── counterSlice.js # 状態の定義と更新ロジック
└── App.js              # アプリケーションのエントリーポイント

5. データフロー比較

useState のデータフロー

Redux のデータフロー

6. 主な特徴と用途

useState の特徴

• ✅ シンプルな実装
• ✅ 学習コストが低い
• ✅ 小規模アプリに最適
• ❌ 状態の共有が難しい
• ❌ 大規模アプリでは管理が複雑

Redux の特徴

• ✅ グローバルな状態管理
• ✅ 状態の共有が容易
• ✅ 大規模アプリに適している
• ❌ 学習コストが高い
• ❌ セットアップが複雑

7. 使用するべきケース

useState が適している場合

• シンプルなフォーム
• モーダルの表示/非表示
• コンポーネント固有の状態
• 小規模なアプリケーション

Redux が適している場合

• ユーザー認証情報
• アプリケーション全体の設定
• 複数のコンポーネントで共有する状態
• 大規模なアプリケーション

8. パフォーマンス比較

useState

• コンポーネントの再レンダリングが最小限
• 状態更新が即時反映
• メモリ使用量が少ない

Redux

• 状態更新の追跡が容易
• デバッグがしやすい
• メモリ使用量が比較的多い

9. まとめ

ReactのuseStateとReact Native + Reduxは、それぞれ異なるユースケースに適した状態管理ソリューションです。プロジェクトの規模や要件に応じて適切な選択を行うことが重要です。小規模なアプリケーションではuseStateで十分な場合が多く、大規模なアプリケーションではReduxの構造化された状態管理が役立ちます。

これで作者情報と投稿日時が含まれたMarkdownドキュメントになりました。このフォーマットはほとんどのブログプラットフォームで適切に表示されます。