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ドキュメントになりました。このフォーマットはほとんどのブログプラットフォームで適切に表示されます。