⚛️ Reactチートシート
| 構文 | 用途 | 例 |
|---|---|---|
| 関数コンポーネント | UIの部品を定義 | function App() { return <h1>Hello</h1>; } |
| props | 親から子にデータを渡す | function Card({ title }) { return <h2>{title}</h2>; } |
| children | 子要素を受け取る | function Box({ children }) { return |
| useState | 状態を管理する | const [count, setCount] = useState(0); |
| useEffect | 副作用を実行する | useEffect(() => { fetchData(); }, []); |
| useRef | DOM参照・値の保持 | const ref = useRef(null); |
| useMemo | 計算結果をキャッシュ | const sorted = useMemo(() => sort(items), [items]); |
| useCallback | 関数をキャッシュ | const handleClick = useCallback(() => {}, []); |
| useContext | コンテキストの値を取得 | const theme = useContext(ThemeContext); |
| useReducer | 複雑な状態管理 | const [state, dispatch] = useReducer(reducer, init); |
| イベント処理 | ユーザー操作に反応 | |
| 条件付きレンダリング | 条件で表示を切替 | {isLoggedIn ? |
| リスト描画 | 配列をUIに変換 | {items.map(item => |
| フォーム（制御） | 入力値をstateで管理 | setName(e.target.value)} /> |
| カスタムフック | ロジックを再利用 | function useToggle(init) { const [v, setV] = useState(init); return [v, () => setV(!v)]; } |
| React.memo | 不要な再レンダリング防止 | const MemoComp = React.memo(MyComponent); |
| forwardRef | refを子に転送 | const Input = forwardRef((props, ref) => ); |
| Fragment | 余分なDOMなしでグループ化 | <>{child1}{child2} |
| Suspense | 非同期コンポーネントの待機 | |
| lazy | コンポーネントの遅延読み込み | const LazyComp = lazy(() => import("./Heavy")); |
| ErrorBoundary | エラーをキャッチして表示 | class EB extends Component { componentDidCatch(e) {...} } |
| Portal | DOM階層外にレンダリング | createPortal( |
| key | リスト要素の一意識別子 | |
| useId | 一意なIDを生成 | const id = useId(); // SSR安全 |
| use (React 19) | Promiseやcontextを読む | const data = use(fetchPromise); |
📖 関連する用語
❓ よくある質問
Reactチートシートはどんな人向け？
React初心者〜中級者向け。基本のHooksからパフォーマンス最適化まで網羅しています。
印刷して使える？
はい。印刷に最適化されたレイアウトで出力されます。
Next.jsでも使える？
はい。ReactのHooksや構文はNext.jsでもそのまま使えます。
⚠️ よくあるエラー
- Maximum update depth exceeded — useEffectの依存配列
- Cannot read properties of undefined (map) — 初期値未設定