React チートシート

すべてのツール

無料

検索・印刷できる React 19 リファレンス——コンポーネント、JSX、フック、新しい Actions API、コンテキスト、ref、パフォーマンス。無料。

Components & JSX

function App() { return <h1>Hi</h1>; }

A function component returning JSX

export default function App() {}

Default-export a component

<Greeting name="Ada" />

Render a component with props

{1 + 2} or {user.name}

Embed a JS expression with braces

<>{a}{b}</>

Fragment groups nodes, no extra DOM

<div className="card">

Use className, not class, for CSS

{isOpen && <Menu />}

Render conditionally with &&

{ok ? <Yes /> : <No />}

Choose between nodes with a ternary

{items.map(i => <li key={i.id}>{i.t}</li>)}

Render a list from an array

function Btn({ label, onClick }) {}

Destructure props in the signature

function Card({ children }) { return children; }

Read nested JSX via the children prop

<input value={v} onChange={onChange} />

Controlled input bound to state

Rendering & setup

import { createRoot } from 'react-dom/client'

Import the client root API

createRoot(document.getElementById('root')).render(<App/>)

Mount the app into the DOM

import { StrictMode } from 'react'

Import StrictMode wrapper

<StrictMode><App /></StrictMode>

Surface bugs in development

import { hydrateRoot } from 'react-dom/client'

Import the hydration API

hydrateRoot(el, <App />)

Attach React to server HTML

root.unmount()

Tear down a mounted root

import App from './App.jsx'

Import a component from a module

<App {...props} />

Spread an object as props

export { Button, Card }

Named-export multiple components

State & effects

const [count, setCount] = useState(0)

Declare a state variable

setCount(c => c + 1)

Update from the previous value

setUser(u => ({ ...u, name }))

Update object state immutably

useEffect(() => { run(); }, [dep])

Run an effect when deps change

useEffect(() => { /* once */ }, [])

Run an effect only on mount

useEffect(() => () => cleanup(), [])

Return a cleanup function

const ref = useRef(null)

Hold a mutable value across renders

const [state, dispatch] = useReducer(r, init)

Manage complex state with a reducer

const theme = useContext(ThemeContext)

Read the nearest context value

const memo = useMemo(() => calc(a), [a])

Memoize an expensive computation

useLayoutEffect(() => {}, [])

Run synchronously after layout

useSyncExternalStore(sub, get)

Subscribe to an external store

React 19 hooks & APIs

import { use } from 'react'

Import the new use API

const data = use(promise)

Read a promise, suspends until ready

const theme = use(ThemeContext)

Read context, allowed conditionally

const [state, action, pending] = useActionState(fn, init)

Track state, action and pending

const [opt, addOpt] = useOptimistic(state, reducer)

Show an optimistic value instantly

const { pending } = useFormStatus()

Read the parent form submit status

const [isPending, startTransition] = useTransition()

Mark updates as non-urgent

startTransition(async () => await save())

Run an async Action in a transition

const deferred = useDeferredValue(value)

Defer a value to keep UI responsive

const id = useId()

Generate a stable unique id

<title>Page title</title>

Render metadata anywhere in the tree

function Input({ ref }) {}

ref is a normal prop, no forwardRef

Forms & Actions

<form action={handleSubmit}>

Pass a function as a form Action

function handleSubmit(formData) {}

Action receives the FormData

formData.get('email')

Read a field from FormData

const [state, action] = useActionState(submit, null)

Wire an Action to component state

<form action={action}>

Use the wrapped Action on the form

const [s, a, pending] = useActionState(fn, init)

Expose a pending flag for the UI

return { error: 'Invalid' }

Return error state from an Action

function Submit() { const { pending } = useFormStatus() }

Read pending inside the submit button

<button disabled={pending}>Save</button>

Disable submit while pending

import { requestFormReset } from 'react-dom'

Import the form reset helper

requestFormReset(formEl)

Reset an uncontrolled form

<form action={action}><Submit /></form>

Compose Action form with status

Props & composition

function Hi({ name = 'Guest' }) {}

Default prop via destructuring

function Box({ children }) { return children; }

Wrap content with the children prop

<Box><p>Inside</p></Box>

Pass JSX as children

function List({ render }) { return render(); }

Render prop pattern

<List render={() => <Item />} />

Provide a render function

<Input {...props} />

Forward all props with spread

const { id, ...rest } = props

Pick a prop and pass the rest

<Avatar {...rest} size="lg" />

Spread then override a prop

function Btn(props: BtnProps) {}

Type props with TypeScript interfaces

<Slot label={<b>Hi</b>} />

Pass JSX through a named prop

Events

<button onClick={handleClick}>

Attach a click handler

function handleClick(e) {}

Receive the synthetic event

<input onChange={e => set(e.target.value)} />

Read an input value on change

<form onSubmit={e => e.preventDefault()}>

Stop the default form submit

e.stopPropagation()

Prevent the event from bubbling

<li onClick={() => remove(id)}>

Pass arguments with a closure

<input onKeyDown={e => e.key === 'Enter'}

Handle a specific key press

<div onMouseEnter={hover}>

Listen for pointer events

e.currentTarget.value

Read the element the handler is on

<button onClick={() => {}} type="button">

Avoid implicit form submission

Lists & keys

arr.map(x => <li key={x.id}>{x.t}</li>)

Render one node per item

key={item.id}

Give each item a stable key

key={index}

Index keys only for static lists

users.map(u => <Card key={u.id} {...u} />)

Spread item fields as props

{list.length === 0 && <Empty />}

Show a fallback for empty lists

import { Fragment } from 'react'

Import Fragment for keyed groups

<Fragment key={id}>{a}{b}</Fragment>

A keyed fragment in a list

{rows.filter(r => r.on).map(...)}

Filter before mapping

Keys must be unique among siblings

Why keys help React diff lists

{[...Array(n)].map((_, i) => ...)}

Map a fixed-length range

Context

const ThemeContext = createContext('light')

Create a context with a default

import { createContext } from 'react'

Import the context factory

<ThemeContext value={theme}>

Provide a value (React 19 syntax)

<ThemeContext value={theme}><App /></ThemeContext>

Wrap the tree that reads it

const theme = useContext(ThemeContext)

Read context with useContext

const theme = use(ThemeContext)

Read context with the use API

if (cond) { const t = use(Ctx); }

use can read context conditionally

export const ThemeContext = createContext()

Export a shared context

<Ctx value={{ user, setUser }}>

Pass an object as the value

Avoid new objects each render

Memoize values to limit re-renders

Refs

const inputRef = useRef(null)

Create a ref holder

<input ref={inputRef} />

Attach the ref to a node

inputRef.current.focus()

Access the DOM node via current

function Field({ ref }) { return <input ref={ref} /> }

ref as a prop, no forwardRef

<Field ref={inputRef} />

Pass a ref to a component

useImperativeHandle(ref, () => ({ focus }))

Expose an imperative API

const setRef = node => { box = node; }

Use a callback ref

<div ref={setRef} />

Attach a callback ref

const count = useRef(0)

Store a value without re-rendering

ref={node => { return () => cleanup(); }}

Callback ref with cleanup (React 19)

Performance

const Memo = memo(Component)

Skip re-render when props are equal

import { memo } from 'react'

Import the memo helper

const value = useMemo(() => calc(a), [a])

Cache a computed value

const fn = useCallback(() => f(a), [a])

Cache a function identity

const Lazy = lazy(() => import('./Big.jsx'))

Code-split a component

import { lazy, Suspense } from 'react'

Import lazy and Suspense

<Suspense fallback={<Spin />}><Lazy /></Suspense>

Show a fallback while loading

startTransition(() => setQuery(q))

Mark non-urgent state updates

const slow = useDeferredValue(query)

Defer expensive derived UI

React Compiler auto-memoizes

Often removes manual memoization

Misc & metadata

<Suspense fallback={<Loading />}>

Boundary for async content

class ErrorBoundary extends Component {}

Catch render errors (legacy class)

<title>My Page</title>

Hoist document title from a component

<meta name="description" content="..." />

Render meta tags into the head

<link rel="stylesheet" href="..." />

Hoist a stylesheet link

<Comp key={id} />

Change key to remount a component

React.lazy(() => import('./Page.jsx'))

Lazily import a route component

createPortal(node, container)

Render into a different DOM node

{/* a comment */}

Write a comment inside JSX

cleanup return in useEffect

Always release subscriptions/timers

「:q」に一致する項目はありません。

React チートシートについて

このReactチートシートはReact 19を対象に、コンポーネントとJSX、レンダリングとセットアップ、状態とエフェクト、React 19のフックとAPI、フォームとActions、propsと合成、イベント、リストとキー、コンテキスト、ref、パフォーマンス、メタデータとその他というコンセプト別にライブラリをマッピングしています。

あらゆるコンポーネントで使う基礎(useState、useEffect、props、キー、制御コンポーネント)と、Actionsベースのフォームパターンを含むより新しいReact 19の追加機能の両方をカバーしているため、復習にも現行APIへの橋渡しにも使えます。

このシートは無料でクライアントサイド動作です。検索ボックスでフックやパターンをその場で絞り込み、固定目次からセクション間を移動し、任意のスニペットをワンクリックでコピーし、コンポーネント構築中の参照用にページを印刷できます。

React チートシートの使い方

コンポーネントとJSX、状態とエフェクトから、React 19のフックとAPI、パフォーマンスまで、各セクションをざっと確認します。
useEffect、key、contextのようなフックや概念を検索して、シートをその場で絞り込みます。
特定のパターンが必要なときは、固定サイドバーからフォームとActionsやrefにジャンプします。
スニペットやそのコピーアイコンをクリックして、コードをコンポーネントにコピーします。
オフラインのReact参照用にシートを印刷します。

よくある質問

はい。従来からの基礎に加えて、React 19専用のフックとAPIのセクション、より新しいActionsパターンを軸にしたフォームセクションがあります。

12のセクションです: コンポーネントとJSX、レンダリングとセットアップ、状態とエフェクト、React 19のフックとAPI、フォームとActions、propsと合成、イベント、リストとキー、コンテキスト、ref、パフォーマンス、メタデータとその他です。

はい。状態とエフェクトのセクションではuseStateとuseEffectの使い方をよくあるバリエーションとともに示し、コンテキスト、ref、パフォーマンスの各セクションではそれぞれの関心事に対応するフックをカバーしています。

はい。任意のコードスニペットやホバー時のコピーアイコンをクリックすると、簡単な確認とともにクリップボードに反映されます。

はい、完全無料です。検索・印刷が可能で、ブラウザ内で描画され、サインアップは不要です。

React チートシート

Components & JSX

Rendering & setup

State & effects

React 19 hooks & APIs

Forms & Actions

Props & composition

Events

Lists & keys

Context

Refs

Performance

Misc & metadata

React チートシートについて

React チートシートの使い方

よくある質問

このチートシートはReact 19に対応していますか?

どんなトピックをカバーしていますか?

コアフックもカバーしていますか?

スニペットをワンクリックでコピーできますか?

このReact参照は無料ですか?

関連ツール

人気の検索

このツールを埋め込む