StateとHooks

以下のコードで、タイマーを適切に停止するための記述はどれですか？ ```jsx useEffect(() => { const interval = setInterval(() => { setSeconds(prev => prev - 1); }, 1000); // ここにクリーンアップ処理 }, []); ```

useEffectで条件付きでAPIを呼び出す場合の正しい記述はどれですか？

同一ドメインの異なるページ間でlocalStorageのデータはどのように扱われますか？

useStateフックの初期値として設定できないものはどれですか？

useEffectで非同期処理（API通信）を行う正しい方法はどれですか？

パフォーマンス最適化のHooks（`useMemo`、`useCallback`）に関する適切な考え方はどれですか？

以下のuseEffectの依存配列として最も適切なものはどれですか？ ```jsx const [user, setUser] = useState(null); const [posts, setPosts] = useState([]); useEffect(() => { if (user) { fetchUserPosts(user.id); } }, /* ここに依存配列 */); ```

useEffectフックが実行されるタイミングとして正しいものはどれですか？

localStorageの特徴として**正しくない**ものはどれですか？

以下のコードで何が起こりますか？ ```jsx const [count, setCount] = useState(0); useEffect(() => { setCount(count + 1); }); ```

Context APIの適切な使用場面として**最も適切でない**ものはどれですか？

以下の`useReducer`のコードで、商品を追加する際に正しい`dispatch`の呼び出し方はどれですか？ ```javascript function cartReducer(state, action) { switch (action.type) { case 'ADD_ITEM': return { ...state, items: [...state.items, action.item] }; default: return state; } } ```

以下のコードで、ボタンを連続で3回クリックした場合の最終的なcountの値はどうなりますか？ ```jsx const handleClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; ```

以下のコードにおいて、リストが空の場合に表示される内容はどれですか？ ```jsx {items.length === 0 ? ( <p>まだ項目がありません</p> ) : ( <ul>{/* リスト表示 */}</ul> )} ```

以下のコードでボタンをクリックしたときの動作として正しいものはどれですか？ ```jsx function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> {count} </button> ); } ```

以下のコードで、`localStorage.getItem('todos')`が`null`を返す場合はどのような状況ですか？

useStateの初期値に関数を渡す利点として最も重要なのはどれですか？

以下のコードでエラーハンドリングを追加する最も適切な場所はどこですか？ ```javascript const [todos, setTodos] = useState(() => { const savedTodos = localStorage.getItem('todos'); if (savedTodos) { return JSON.parse(savedTodos); } return defaultTodos; }); ```

Stateの更新において、以下のうち最も推奨される書き方はどれですか？

以下のuseEffectで、ユーザーIDが変更されるたびにユーザー情報を取得したい場合、正しい記述はどれですか？ ```jsx const [user, setUser] = useState(null); const [userId, setUserId] = useState(1); ```

useEffectで非同期処理を行う際に、コンポーネントがアンマウントされた後の状態更新を防ぐ方法はどれですか？

オブジェクトのStateで、計算されたプロパティ名を使った更新の書き方として正しいものはどれですか？

localStorageを使ってデータを保存する際、オブジェクトや配列をそのまま保存できない理由は何ですか？

useEffectでイベントリスナーを登録する際の正しいパターンはどれですか？

Reactのcontrolledコンポーネントにおいて、input要素で必須となる2つの属性の組み合わせはどれですか？

React Hooksを使用する際の重要なルールは何ですか？

useEffectの依存配列に関数を含める場合の注意点として正しいものはどれですか？

以下のコードで、ボタンをクリックした際の動作として正しいものはどれですか？ ```jsx const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); setCount(count + 1); }; ```

以下のコードで、入力フィールドに文字を入力しても画面に反映されない理由はどれですか？ ```jsx function TextInput() { const [text, setText] = useState(""); return ( <input value={text} onChange={(e) => console.log(e.target.value)} /> ); } ```

入力フォームのバリデーション処理として、以下のコードの`trim()`メソッドの役割は何ですか？ ```jsx const addItem = () => { if (newItem.trim() !== '') { setItems(prev => [...prev, newItem]); } }; ```

以下のコードで、fetchDataが再作成されることによる無限ループを防ぐ方法はどれですか？ ```jsx const MyComponent = () => { const [data, setData] = useState([]); const fetchData = async () => { const response = await fetch('/api/data'); setData(await response.json()); }; useEffect(() => { fetchData(); }, [fetchData]); }; ```

`useContext`を使用する際、Providerで囲まれていないコンポーネントで`useContext`を呼び出すとどうなりますか？

useEffectでクリーンアップ関数を使う主な目的は何ですか？

配列のStateから特定の要素を削除する際の正しい書き方はどれですか？

`useCallback`が解決する問題は何ですか？

useEffectを使ってtodosステートが変更されるたびにlocalStorageに自動保存する場合、依存配列はどう書きますか？

JSON.parseで文字列をオブジェクトに変換する際、無効なJSON文字列が渡されるとどうなりますか？

`useMemo`の依存配列に何も指定しない場合、どのような動作になりますか？

以下のチェックボックスコンポーネントで、正しく動作させるために必要な修正はどれですか？ ```jsx function Checkbox() { const [isChecked, setIsChecked] = useState(false); return ( <input type="checkbox" checked={isChecked} onChange={() => setIsChecked(!isChecked)} /> ); } ```

配列のStateに新しい要素を追加する際の正しい書き方はどれですか？

以下のコードで、`e.target.value`の`e`は何を表していますか？ ```jsx <input onChange={(e) => setName(e.target.value)} /> ```

以下のコードで、localStorageからデータを取得してオブジェクトに変換する正しい方法はどれですか？

Stateの更新が非同期である場合の正しい理解はどれですか？

useEffectで複数のサイドエフェクトを管理する際のベストプラクティスはどれですか？

以下のコードの問題点は何ですか？ ```javascript function UserProfile({ userId }) { const [user, setUser] = useState(null); if (userId) { const [loading, setLoading] = useState(false); } return <div>{user?.name}</div>; } ```

`useReducer`が`useState`よりも適している状況はどれですか？

アプリ起動時にlocalStorageからデータを読み込む処理を実装する際、useStateの初期値にはどのような形式で関数を渡しますか？

useStateを使用する際の命名規則として最も適切なものはどれですか？

以下のコードで、初回起動時にlocalStorageにデータがない場合の動作として正しいのはどれですか？ ```javascript const [todos, setTodos] = useState(() => { const savedTodos = localStorage.getItem('todos'); if (savedTodos) { return JSON.parse(savedTodos); } return [{ id: 1, text: "デフォルト", completed: false }]; }); ```

以下のuseEffectで、処理が実行されるタイミングはいつですか？ ```jsx useEffect(() => { console.log('実行されました'); }, []); ```

Reactにおいて、Stateを直接変更してはいけない理由として最も適切なものはどれですか？

useState の初期値として、空の配列を設定する正しい書き方はどれですか？

以下のコードで「+10」ボタンをクリックした時の動作として正しいものはどれですか？ ```jsx function Counter() { const [count, setCount] = useState(0); const addTen = () => { for (let i = 0; i < 10; i++) { setCount(count + 1); } }; return ( <button onClick={addTen}>+10</button> ); } ```

複数のStateを管理する際、関連する値をオブジェクトにまとめる利点として**最も適切でない**ものはどれですか？

以下のコードで、`useContext`を正しく使用しているものはどれですか？ ```javascript const UserContext = createContext(); ```

複数のStateを管理する場合の正しい書き方はどれですか？

localStorageからデータを読み込む際に、データが存在しない場合やJSON解析でエラーが発生した場合の対処法として最も適切なのはどれですか？

以下のコードの実行結果はどうなりますか？ ```javascript const data = { name: "山田", age: 25 }; localStorage.setItem('user', data); const result = localStorage.getItem('user'); console.log(result); ```

以下のコードで発生する問題は何ですか？ ```jsx const [data, setData] = useState([]); useEffect(() => { fetch('/api/data') .then(response => response.json()) .then(result => setData(result)); }, [data]); ```

複数のボタンが同じStateを更新する場合、最も効率的なコードの書き方はどれですか？

APIからデータを取得する際に、ローディング状態を管理する一般的なパターンはどれですか？

複数の入力項目がある場合のState管理方法として**最も適切でない**ものはどれですか？

以下のコードの問題点は何ですか？ ```javascript useEffect(() => { const savedTodos = localStorage.getItem('todos'); if (savedTodos) { setTodos(JSON.parse(savedTodos)); } }, []); ```

以下のリスト表示で、`key`属性にインデックスを使用することの問題点として正しいものはどれですか？ ```jsx {items.map((item, index) => ( <li key={index}>{item}</li> ))} ```

以下のコンポーネントで、ボタンをクリックしたときに期待通りに動作しないのはなぜですか？ ```jsx function ToggleButton() { const [isOn, setIsOn] = useState(false); const handleToggle = () => { isOn = !isOn; // この行に問題がある }; return ( <button onClick={handleToggle}> {isOn ? 'ON' : 'OFF'} </button> ); } ```

以下の`useReducer`のreducer関数で重要な原則は何ですか？ ```javascript function reducer(state, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; default: return state; } } ```

localStorageに保存できるデータの容量制限について、一般的な制限はどの程度ですか？

`useReducer`を使用する際、状態を更新するために呼び出す関数の名前は何ですか？

ReactのuseStateフックを使用する際の正しい記述はどれですか？

`useMemo`と`useCallback`の違いとして正しいものはどれですか？

`useContext`が解決する主要な問題は何ですか？

以下のStateの更新処理で、最も効率的で推奨される書き方はどれですか？

useState内で関数を初期値として設定する正しい方法はどれですか？

オブジェクトのStateの一部を更新する際の正しい書き方はどれですか？

以下のコードで、入力欄に「Hello」と入力した場合、画面に表示される内容はどうなりますか？ ```jsx const [text, setText] = useState(''); return ( <div> <input value={text} onChange={(e) => setText(e.target.value)} /> <p>入力内容: {text}</p> </div> ); ```

useEffectでlocalStorageへの保存処理を行う際、空の依存配列`[]`を使用するとどのような動作になりますか？

`useCallback`の依存配列に含めるべき値は何ですか？

以下のmapメソッドを使った配列の表示において、`key`属性が必要な理由として正しいものはどれですか？ ```jsx {items.map((item, index) => ( <li key={index}>{item}</li> ))} ```

`useMemo`の主な用途は何ですか？