Treat state as read-only import { useState } from "react"; function App() { const [plan, setPlan] = useState({ x: 1, y: 2 }); return ( <> {plan.x} <button onClick={() => (plan.x += 1)}>a</button> ); } export default App; 上記のコードでボタンを押下しても，画面に表示され…

state の構造を考えるときに，考慮すべき原則は以下。 関連する state をグループ化する。 二つ以上の state を常に同時に更新しているなら，それらの state を単一の state に統合することを考えるべき。 state 間での矛盾を避ける。 冗長な state を避ける…

You Might Not Need an Effect Resetting all state when a prop changes 悪い例 import { useEffect, useState } from "react"; const App = () => { const [userId, setUserId] = useState(0); return ( <> <button onClick={() => setUserId((userId) => userId + 1)}>+1</button> <Comment userId={userId} /> ); };</comment>…