React チートシート
検索・印刷できる React 19 リファレンス——コンポーネント、JSX、フック、新しい Actions API、コンテキスト、ref、パフォーマンス。無料。
コンポーネントとJSX
12function App() { return <h1>Hi</h1>; }
JSXを返す関数コンポーネント
export default function App() {}
コンポーネントをデフォルトエクスポート
<Greeting name="Ada" />
props付きでコンポーネントをレンダリング
{1 + 2} or {user.name}
波括弧でJS式を埋め込む
<>{a}{b}</>
FragmentでノードをまとめDOMを増やさない
<div className="card">
CSSにはclassでなくclassNameを使用
{isOpen && <Menu />}
&&で条件付きレンダリング
{ok ? <Yes /> : <No />}
三項演算子でノードを選択
{items.map(i => <li key={i.id}>{i.t}</li>)}
配列からリストをレンダリング
function Btn({ label, onClick }) {}
シグネチャでpropsを分割代入
function Card({ children }) { return children; }
children prop経由でネストしたJSXを読む
<input value={v} onChange={onChange} />
stateに紐づく制御された入力
レンダリングとセットアップ
10import { createRoot } from 'react-dom/client'
クライアントルートAPIをインポート
createRoot(document.getElementById('root')).render(<App/>)
アプリをDOMにマウント
import { StrictMode } from 'react'
StrictModeラッパーをインポート
<StrictMode><App /></StrictMode>
開発時にバグを表面化
import { hydrateRoot } from 'react-dom/client'
ハイドレーションAPIをインポート
hydrateRoot(el, <App />)
ReactをサーバーHTMLにアタッチ
root.unmount()
マウント済みrootを破棄
import App from './App.jsx'
モジュールからコンポーネントをインポート
<App {...props} />
オブジェクトをpropsとして展開
export { Button, Card }
複数コンポーネントを名前付きエクスポート
stateとeffect
12const [count, setCount] = useState(0)
state変数を宣言
setCount(c => c + 1)
前の値から更新
setUser(u => ({ ...u, name }))
オブジェクトstateをイミュータブルに更新
useEffect(() => { run(); }, [dep])
依存変化時にeffectを実行
useEffect(() => { /* once */ }, [])
マウント時のみeffectを実行
useEffect(() => () => cleanup(), [])
クリーンアップ関数を返す
const ref = useRef(null)
レンダー間で可変値を保持
const [state, dispatch] = useReducer(r, init)
reducerで複雑なstateを管理
const theme = useContext(ThemeContext)
最も近いcontext値を読む
const memo = useMemo(() => calc(a), [a])
高コストな計算をメモ化
useLayoutEffect(() => {}, [])
レイアウト後に同期実行
useSyncExternalStore(sub, get)
外部ストアを購読
React 19のフックとAPI
12import { use } from 'react'
新しいuse APIをインポート
const data = use(promise)
promiseを読み、準備までサスペンド
const theme = use(ThemeContext)
contextを読む、条件付きで許可
const [state, action, pending] = useActionState(fn, init)
state/action/pendingを追跡
const [opt, addOpt] = useOptimistic(state, reducer)
楽観的な値を即座に表示
const { pending } = useFormStatus()
親フォームの送信状態を読む
const [isPending, startTransition] = useTransition()
更新を非緊急とマーク
startTransition(async () => await save())
transition内で非同期Actionを実行
const deferred = useDeferredValue(value)
UI応答性維持のため値を遅延
const id = useId()
安定した一意IDを生成
<title>Page title</title>
ツリー内のどこでもメタデータをレンダリング
function Input({ ref }) {}
refは通常のprop、forwardRef不要
フォームとAction
12<form action={handleSubmit}>
関数をフォームのActionとして渡す
function handleSubmit(formData) {}
ActionはFormDataを受け取る
formData.get('email')
FormDataからフィールドを読む
const [state, action] = useActionState(submit, null)
Actionをコンポーネントstateに接続
<form action={action}>
ラップしたActionをフォームで使用
const [s, a, pending] = useActionState(fn, init)
UI用にpendingフラグを公開
return { error: 'Invalid' }
Actionからエラー状態を返す
function Submit() { const { pending } = useFormStatus() }
送信ボタン内でpendingを読む
<button disabled={pending}>Save</button>
pending中は送信を無効化
import { requestFormReset } from 'react-dom'
フォームリセットヘルパーをインポート
requestFormReset(formEl)
非制御フォームをリセット
<form action={action}><Submit /></form>
ステータス付きでActionフォームを構成
propsと合成
10function Hi({ name = 'Guest' }) {}
分割代入によるデフォルトprop
function Box({ children }) { return children; }
children propでコンテンツをラップ
<Box><p>Inside</p></Box>
JSXをchildrenとして渡す
function List({ render }) { return render(); }
render propパターン
<List render={() => <Item />} />
render関数を提供
<Input {...props} />
spreadで全propsを転送
const { id, ...rest } = props
1つのpropを取り出し残りを渡す
<Avatar {...rest} size="lg" />
spread後にpropを上書き
function Btn(props: BtnProps) {}
TypeScriptインターフェースでpropsに型付け
<Slot label={<b>Hi</b>} />
名前付きprop経由でJSXを渡す
イベント
10<button onClick={handleClick}>
クリックハンドラを登録
function handleClick(e) {}
合成イベントを受け取る
<input onChange={e => set(e.target.value)} />
change時に入力値を読む
<form onSubmit={e => e.preventDefault()}>
デフォルトのフォーム送信を停止
e.stopPropagation()
イベントのバブリングを防止
<li onClick={() => remove(id)}>
クロージャで引数を渡す
<input onKeyDown={e => e.key === 'Enter'}
特定のキー押下を処理
<div onMouseEnter={hover}>
ポインターイベントをリッスン
e.currentTarget.value
ハンドラが付いた要素を読む
<button onClick={() => {}} type="button">
暗黙のフォーム送信を回避
リストとキー
10arr.map(x => <li key={x.id}>{x.t}</li>)
項目ごとに1ノードをレンダリング
key={item.id}
各項目に安定したkeyを付与
key={index}
静的リストのみインデックスkeyを使用
users.map(u => <Card key={u.id} {...u} />)
項目フィールドをpropsとして展開
{list.length === 0 && <Empty />}
空リスト用のフォールバックを表示
import { Fragment } from 'react'
keyedグループ用にFragmentをインポート
<Fragment key={id}>{a}{b}</Fragment>
リスト内のkey付きフラグメント
{rows.filter(r => r.on).map(...)}
マッピング前にフィルタ
Keys must be unique among siblings
keyがReactのリスト差分を助ける理由
{[...Array(n)].map((_, i) => ...)}
固定長の範囲をマップ
コンテキスト
10const ThemeContext = createContext('light')
デフォルト付きでcontextを作成
import { createContext } from 'react'
contextファクトリをインポート
<ThemeContext value={theme}>
値を提供 (React 19構文)
<ThemeContext value={theme}><App /></ThemeContext>
それを読むツリーをラップ
const theme = useContext(ThemeContext)
useContextでcontextを読む
const theme = use(ThemeContext)
use APIでcontextを読む
if (cond) { const t = use(Ctx); }
useは条件付きでcontextを読める
export const ThemeContext = createContext()
共有contextをエクスポート
<Ctx value={{ user, setUser }}>
オブジェクトを値として渡す
Avoid new objects each render
再レンダー抑制のため値をメモ化
ref
10const inputRef = useRef(null)
refホルダーを作成
<input ref={inputRef} />
refをノードにアタッチ
inputRef.current.focus()
current経由でDOMノードにアクセス
function Field({ ref }) { return <input ref={ref} /> }
propとしてのref、forwardRef不要
<Field ref={inputRef} />
refをコンポーネントに渡す
useImperativeHandle(ref, () => ({ focus }))
命令的APIを公開
const setRef = node => { box = node; }
コールバックrefを使用
<div ref={setRef} />
コールバックrefをアタッチ
const count = useRef(0)
再レンダーせず値を保持
ref={node => { return () => cleanup(); }}
クリーンアップ付きコールバックref (React 19)
パフォーマンス
10const Memo = memo(Component)
propsが等しい時に再レンダーをスキップ
import { memo } from 'react'
memoヘルパーをインポート
const value = useMemo(() => calc(a), [a])
計算値をキャッシュ
const fn = useCallback(() => f(a), [a])
関数の同一性をキャッシュ
const Lazy = lazy(() => import('./Big.jsx'))
コンポーネントをコード分割
import { lazy, Suspense } from 'react'
lazyとSuspenseをインポート
<Suspense fallback={<Spin />}><Lazy /></Suspense>
読み込み中にフォールバックを表示
startTransition(() => setQuery(q))
非緊急のstate更新をマーク
const slow = useDeferredValue(query)
高コストな派生UIを遅延
React Compiler auto-memoizes
手動メモ化を不要にすることが多い
その他とメタデータ
10<Suspense fallback={<Loading />}>
非同期コンテンツの境界
class ErrorBoundary extends Component {}
レンダーエラーを捕捉(レガシークラス)
<title>My Page</title>
コンポーネントからdocument titleを巻き上げ
<meta name="description" content="..." />
metaタグをheadにレンダリング
<link rel="stylesheet" href="..." />
スタイルシートリンクを巻き上げ
<Comp key={id} />
keyを変えてコンポーネントを再マウント
React.lazy(() => import('./Page.jsx'))
ルートコンポーネントを遅延インポート
createPortal(node, container)
別のDOMノードにレンダリング
{/* a comment */}
JSX内にコメントを書く
cleanup return in useEffect
購読/タイマーを必ず解放
「:q」に一致する項目はありません。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。