React入門 — コンポーネントとHooks
解説で理解を深める
React基礎・実践の問題一覧
該当件数68件
useState
9問Reactでコンポーネントの状態を管理するために使用するHookは？
Reactの標準機能として間違っているものは？
setCount(count + 1) を1つのハンドラ内で2回呼んだ。countはいくつ増える？
以下のコードを実行すると「Rendered more hooks than during the previous render」というエラーが発生します。原因として正しいものはどれですか？ function UserProfile({ isLoggedIn }) { if (isLoggedIn) { const [name, setName] = useState(''); } const [age, setAge] = useState(0); return <div>{age}</div>; }
次のコンポーネントのボタンをクリックしたとき、画面に表示されるカウントの挙動として正しいものはどれですか？ <pre><code>function Counter() { const count = useRef(0); return ( <button onClick={() => { count.current++; console.log(count.current); }}> count: {count.current} </button> ); }</code></pre>
次のコードでボタンを1回クリックした直後、画面の count はどう増えますか？ function Counter() { const [count, setCount] = useState(0); const onClick = () => { setCount(count + 1); setCount(count + 1); }; return <button onClick={onClick}>{count}</button>; }
useStateで管理しているオブジェクトを更新する方法として適切なのはどれですか？
Reactのcontrolled inputで、入力しても文字が変わらない典型的な原因はどれですか？
react-hooks/set-state-in-effect が主に検出するコードはどれですか？
useEffect
9問Reactで副作用（side effects）を処理するために使用するHookは？
Reactの標準機能として間違っているものは？
useEffectの依存配列を空配列[]にした場合の動作は？
関数コンポーネントでライフサイクルメソッドの代わりに使用するのは？
useEffectで無限ループが発生する原因は？
useEffect内で参照しているstateを依存配列に入れない場合に起きやすい問題はどれですか？
useEffectのクリーンアップ関数が実行される主なタイミングとして正しいものはどれですか？
開発環境のReact.StrictModeでuseEffectが2回実行されたように見える主な理由はどれですか？
react-hooks/set-state-in-effect が主に検出するコードはどれですか？
useRef
7問ReactでDOM要素への参照を保持するために使用するHookは？
React.forwardRefの主な用途は？
次のコンポーネントのボタンをクリックしたとき、画面に表示されるカウントの挙動として正しいものはどれですか？ <pre><code>function Counter() { const count = useRef(0); return ( <button onClick={() => { count.current++; console.log(count.current); }}> count: {count.current} </button> ); }</code></pre>
コンポーネントが再レンダリングされたとき、useRefの値はリセットされる？
useRefで作った値は、どのプロパティに保存されている？
setIntervalのIDを保持し、IDの変更で再レンダーしたくない場合に適切な保存先はどれですか？
input要素にフォーカスを当てるためにuseRefを使うコードとして正しいものはどれですか？
useMemo
6問Reactでコンポーネントを最適化し、不要な再レンダリングを防ぐために使用するHookは？
Reactでパフォーマンス最適化のために使用できる高階コンポーネントは？
useMemo(() => 重い計算()) と書いて依存配列を省略した。どうなる？
React.memoした子コンポーネントが、親の再レンダーのたびに再レンダーされてしまう原因としてあり得るものはどれですか？
Context Providerのvalueに毎回新しいオブジェクトを渡している場合に起きやすい問題はどれですか？
useMemoの使い方として不適切なのはどれですか？
useCallback
5問Reactでコンポーネントを最適化し、不要な再レンダリングを防ぐために使用するHookは？
次のReactコンポーネントで、useCallbackを使う意味が最もあるのはどのケースですか？
以下の React コンポーネントで useCallback を使っています。handleClick 関数が新しい参照として再生成されるのはどのタイミングですか？ const Parent = () => { const [count, setCount] = useState(0); const [name, setName] = useState(''); const handleClick = useCallback(() => { setCount(c => c + 1); }, []); return ( <> <input onChange={e => setName(e.target.value)} /> <Child onClick={handleClick} /> </> ); };
React.memoした子コンポーネントが、親の再レンダーのたびに再レンダーされてしまう原因としてあり得るものはどれですか？
useCallback内でstateを参照しているのに依存配列を空配列にした場合に起きやすい問題はどれですか？
状態管理
15問Reactでコンポーネントの状態を管理するために使用するHookは？
Reactの標準機能として間違っているものは？
Reactでフォームの入力値をstateで管理するコンポーネントの種類は？
Reactでコンポーネントツリー全体にデータを共有する標準機能はどれですか？
Reactの状態更新はどのように動作するか？
React.forwardRefの主な用途は？
以下のコードを実行すると「Rendered more hooks than during the previous render」というエラーが発生します。原因として正しいものはどれですか？ function UserProfile({ isLoggedIn }) { if (isLoggedIn) { const [name, setName] = useState(''); } const [age, setAge] = useState(0); return <div>{age}</div>; }
コンポーネントが再レンダリングされたとき、useRefの値はリセットされる？
useRefで作った値は、どのプロパティに保存されている？
次のコードでボタンを1回クリックした直後、画面の count はどう増えますか？ function Counter() { const [count, setCount] = useState(0); const onClick = () => { setCount(count + 1); setCount(count + 1); }; return <button onClick={onClick}>{count}</button>; }
useStateで管理しているオブジェクトを更新する方法として適切なのはどれですか？
同じカスタムHookを2つのコンポーネントで呼び出した場合、Hook内部のuseStateはどうなりますか？
Context Providerのvalueに毎回新しいオブジェクトを渡している場合に起きやすい問題はどれですか？
Reactのcontrolled inputで、入力しても文字が変わらない典型的な原因はどれですか？
react-hooks/set-state-in-effect が主に検出するコードはどれですか？
コンポーネント設計
7問Reactでコンポーネントの状態を管理するために使用するHookは？
ReactのRender Propsパターンの特徴として正しいものはどれですか？
同じカスタムHookを2つのコンポーネントで呼び出した場合、Hook内部のuseStateはどうなりますか？
Context Providerのvalueに毎回新しいオブジェクトを渡している場合に起きやすい問題はどれですか？
Reactのcontrolled inputで、入力しても文字が変わらない典型的な原因はどれですか？
React.lazyで読み込むコンポーネントを表示するとき、通常一緒に必要になるものはどれですか？
Reactコンポーネントでタグに挟んだ内容を受け取るために使うpropsはどれですか？
レンダリング・パフォーマンス
14問Reactで条件付きレンダリングを行う際の正しい構文は？
useMemo(() => 重い計算()) と書いて依存配列を省略した。どうなる？
Reactでコンポーネントを必要になるまで読み込まない遅延読み込みを実装する正しい組み合わせは？
Reactでパフォーマンスを測定するために使用するコンポーネントは？
Reactでハイドレーションエラーが発生する主な原因はどれですか？
Reactで「マウント」が起きるのはどのタイミング？
Reactにおける「レンダー」と「マウント」の説明として正しいものはどれですか？
React.memoした子コンポーネントが、親の再レンダーのたびに再レンダーされてしまう原因としてあり得るものはどれですか？
Context Providerのvalueに毎回新しいオブジェクトを渡している場合に起きやすい問題はどれですか？
Todoリストのkeyとして最も適切なのはどれですか？
JSXで {items.length && <List />} と書いたとき、items.length が0なら何が起きますか？
React.lazyで読み込むコンポーネントを表示するとき、通常一緒に必要になるものはどれですか？
SSR/SSGされたReact画面でハイドレーション不一致を起こしやすいコードはどれですか？
開発環境のReact.StrictModeでuseEffectが2回実行されたように見える主な理由はどれですか？
JSX
6問その他
18問Reactでリストをレンダリングする際に必要なプロパティは？
ReactでカスタムHookを作成する際の命名規則は？
Reactでルーティングを実装するために一般的に使用されるライブラリは？
useEffectでクリーンアップ関数を返す目的は？
Reactでpropsの型チェックを行うために使用するライブラリは？
Reactでイベントハンドラを定義する際の正しい命名規則は？
React Hooksの使用に関するルールとして正しいのは？
Reactでpropsを展開して渡す構文は？
Reactで子コンポーネントのエラーをキャッチする機能は？
ReactでDOMツリーの外側にコンポーネントをレンダリングする機能は？
Reactで高階コンポーネント（HOC）の特徴は？
React.StrictModeの主な目的は？
Reactでリストのkeyに配列のインデックスを使用する問題点は？
React 18のConcurrent Featuresの主な利点は？
React Server Componentsの主な特徴は？
React Testing Libraryの推奨されるテスト方法は？
ESLintプラグイン eslint-plugin-react-hooks の rules-of-hooks ルールが違反を報告するケースとして、正しいものはどれですか？
次のコードを実行したとき、console.log の出力として正しいものはどれですか？ const params = new URLSearchParams('tag=js&tag=ts&tag=react'); console.log(params.get('tag'));
React基礎・実践とは
Reactは、Meta（旧Facebook）が開発したJavaScriptライブラリで、ユーザーインターフェースを構築するために広く利用されています。このReact基礎クイズでは、JSX、props、state、useState、useEffect、useRef、再レンダー、依存配列など、初学者がつまずきやすい重要テーマを4択問題で確認できます。コンポーネントベースの考え方を押さえながら、実務で必要になるReact Hooksの判断力も身につけられます。
なぜReact基礎・実践を学ぶべきか
Reactは世界中のフロントエンド開発現場で最も採用されているライブラリの一つです。Next.js、Gatsby、Remixなどのフレームワークの基盤でもあり、Reactを習得することでモダンなWebアプリケーション開発のスキルを身につけられます。特にuseStateの更新、useEffectのクリーンアップ、useRefとstateの違い、React.memoやuseCallbackの使いどころは、面接や実装レビューでも問われやすい知識です。
出題トピック
JSXとコンポーネント
ReactのUI記述言語であるJSXの文法、関数コンポーネント、props、children、リストのkey、条件付きレンダリングの落とし穴を学びます。
React Hooksと依存配列
useState、useEffect、useRef、useMemo、useCallbackの使い方に加えて、依存配列、stale closure、クリーンアップ関数、不要なEffectについて出題します。
状態管理とフォーム
コンポーネントのローカル状態管理、オブジェクトstateのイミュータブル更新、controlled component、Context APIの基本的な考え方を扱います。
ライフサイクルと再レンダー
レンダーとマウントの違い、再レンダーの発生条件、StrictModeでEffectが2回実行される理由、hydration mismatch、メモ化の判断基準について理解を深めます。
こんな方におすすめ
- フロントエンド開発を学び始めたエンジニア
- Vue.jsやAngularからReactへの移行を検討している方
- React Hooksの理解を深めたい方
- 転職・就職面接のためにReactの知識を確認したい方