ReactのuseStateで複雑な状態更新を簡潔にする方法

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // 状態の初期値を設定
    return (
        <div>
            <p>現在のカウント: {count}</p>
            <button onClick={() => setCount(count + 1)}>カウントアップ</button>
        </div>
    );
}

// 問題例
<button onClick={() => setCount(count + 1); setCount(count + 1)}>2回更新</button>

const [user, setUser] = useState({
    name: "John Doe",
    age: 30,
    preferences: {
        theme: "dark",
        notifications: true,
    },
});

setUser({
    ...user, // 元の状態をコピー
    preferences: {
        ...user.preferences, // ネストしたオブジェクトをコピー
        theme: "light", // 新しい値を設定
    },
});

const [tasks, setTasks] = useState([
    { id: 1, title: "Task 1", completed: false },
    { id: 2, title: "Task 2", completed: true },
]);

// idが2のタスクを削除
setTasks(tasks.filter(task => task.id !== 2));

// idが1のタスクのcompletedをtrueに更新
setTasks(
    tasks.map(task => 
        task.id === 1 ? { ...task, completed: true } : task
    )
);

const [state, setState] = useState({
    user: {
        name: "Alice",
        preferences: {
            theme: "dark",
            notifications: true,
        },
    },
});

// preferences.themeを更新
setState({
    ...state,
    user: {
        ...state.user,
        preferences: {
            ...state.user.preferences,
            theme: "light",
        },
    },
});

// 状態を直接変更してしまう誤った例
state.user.preferences.theme = "light"; // 再レンダリングが発生しない
setState(state);

const [count, setCount] = useState(0);

function incrementTwice() {
    setCount(count + 1); // 1回目の更新
    setCount(count + 1); // 2回目の更新（意図した結果にならない）
}

const [tasks, setTasks] = useState(new Array(10000).fill().map((_, i) => ({ id: i, completed: false })));

setTasks(
    tasks.map(task =>
        task.id === 9999 ? { ...task, completed: true } : task
    )
);

const [count, setCount] = useState(0);

// 関数型アップデートの利用
function incrementTwice() {
    setCount(prevCount => prevCount + 1); // 1回目の更新
    setCount(prevCount => prevCount + 1); // 2回目の更新
}

const [user, setUser] = useState({
    name: "Alice",
    preferences: { theme: "dark", notifications: true },
});

// preferences.themeを更新
setUser(prevUser => ({
    ...prevUser,
    preferences: {
        ...prevUser.preferences,
        theme: "light",
    },
}));

const [tasks, setTasks] = useState([
    { id: 1, title: "Task 1", completed: false },
    { id: 2, title: "Task 2", completed: true },
]);

// idが1のタスクを完了済みに更新
setTasks(prevTasks =>
    prevTasks.map(task =>
        task.id === 1 ? { ...task, completed: true } : task
    )
);

const [state, dispatch] = useReducer(reducer, initialState);

import React, { useReducer } from "react";

// reducer関数
function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            throw new Error("Unknown action type");
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>現在のカウント: {state.count}</p>
            <button onClick={() => dispatch({ type: "increment" })}>
                増加
            </button>
            <button onClick={() => dispatch({ type: "decrement" })}>
                減少
            </button>
        </div>
    );
}

import { useState } from "react";

function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(prevCount => prevCount + 1);
    const decrement = () => setCount(prevCount => prevCount - 1);
    const reset = () => setCount(initialValue);

    return { count, increment, decrement, reset };
}

function Counter() {
    const { count, increment, decrement, reset } = useCounter(10);

    return (
        <div>
            <p>カウント: {count}</p>
            <button onClick={increment}>増加</button>
            <button onClick={decrement}>減少</button>
            <button onClick={reset}>リセット</button>
        </div>
    );
}

import { useState } from "react";

function useForm(initialValues) {
    const [values, setValues] = useState(initialValues);

    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues(prevValues => ({ ...prevValues, [name]: value }));
    };

    const resetForm = () => setValues(initialValues);

    return { values, handleChange, resetForm };
}

function SignupForm() {
    const { values, handleChange, resetForm } = useForm({
        username: "",
        email: "",
        password: "",
    });

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log("フォーム送信データ:", values);
        resetForm();
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="username"
                value={values.username}
                onChange={handleChange}
                placeholder="ユーザー名"
            />
            <input
                type="email"
                name="email"
                value={values.email}
                onChange={handleChange}
                placeholder="メールアドレス"
            />
            <input
                type="password"
                name="password"
                value={values.password}
                onChange={handleChange}
                placeholder="パスワード"
            />
            <button type="submit">登録</button>
        </form>
    );
}

// 非効率な状態管理
const [state, setState] = useState({ count: 0, text: "" });

setState({ ...state, count: state.count + 1 }); // textも再計算される

// 状態を分割した効率的な管理
const [count, setCount] = useState(0);
const [text, setText] = useState("");

setCount(count + 1); // countのみ再レンダリング

const ChildComponent = React.memo(({ count }) => {
    console.log("再レンダリング");
    return <div>カウント: {count}</div>;
});

function Example() {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    const handleClick = () => {
        setCount(c => c + 1);
        setText("Updated");
    };

    return (
        <div>
            <button onClick={handleClick}>更新</button>
        </div>
    );
}

const expensiveCalculation = useMemo(() => {
    return heavyComputation(input);
}, [input]);

const handleClick = useCallback(() => {
    console.log("ボタンがクリックされました");
}, []);

const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
    const [theme, setTheme] = useState("light");

    const value = useMemo(() => ({ theme, setTheme }), [theme]);

    return (
        <ThemeContext.Provider value={value}>
            {children}
        </ThemeContext.Provider>
    );
}

import React, { useState } from "react";

function TodoApp() {
    const [tasks, setTasks] = useState([]);
    const [taskInput, setTaskInput] = useState("");

    const addTask = () => {
        if (taskInput.trim() === "") return; // 空の入力は無視
        setTasks(prevTasks => [
            ...prevTasks,
            { id: Date.now(), text: taskInput, completed: false },
        ]);
        setTaskInput("");
    };

    const toggleTaskCompletion = (id) => {
        setTasks(prevTasks =>
            prevTasks.map(task =>
                task.id === id ? { ...task, completed: !task.completed } : task
            )
        );
    };

    const deleteTask = (id) => {
        setTasks(prevTasks => prevTasks.filter(task => task.id !== id));
    };

    return (
        <div>
            <h1>ToDoアプリ</h1>
            <input
                type="text"
                value={taskInput}
                onChange={(e) => setTaskInput(e.target.value)}
                placeholder="タスクを追加..."
            />
            <button onClick={addTask}>追加</button>
            <ul>
                {tasks.map(task => (
                    <li key={task.id} style={{ textDecoration: task.completed ? "line-through" : "none" }}>
                        {task.text}
                        <button onClick={() => toggleTaskCompletion(task.id)}>
                            {task.completed ? "未完了にする" : "完了にする"}
                        </button>
                        <button onClick={() => deleteTask(task.id)}>削除</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

const [filter, setFilter] = useState("all");

const filteredTasks = tasks.filter(task => {
    if (filter === "completed") return task.completed;
    if (filter === "incomplete") return !task.completed;
    return true; // "all"
});

<div>
    <button onClick={() => setFilter("all")}>すべて</button>
    <button onClick={() => setFilter("completed")}>完了</button>
    <button onClick={() => setFilter("incomplete")}>未完了</button>
</div>
<ul>
    {filteredTasks.map(task => (
        // タスクのリスト表示
    ))}
</ul>

import { useEffect } from "react";

useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem("tasks"));
    if (storedTasks) setTasks(storedTasks);
}, []);

useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}, [tasks]);

const TaskItem = React.memo(({ task, onToggle, onDelete }) => (
    <li style={{ textDecoration: task.completed ? "line-through" : "none" }}>
        {task.text}
        <button onClick={() => onToggle(task.id)}>
            {task.completed ? "未完了にする" : "完了にする"}
        </button>
        <button onClick={() => onDelete(task.id)}>削除</button>
    </li>
));

const toggleTaskCompletion = useCallback((id) => {
    setTasks(prevTasks =>
        prevTasks.map(task =>
            task.id === id ? { ...task, completed: !task.completed } : task
        )
    );
}, []);