Lembar Contekan React
Referensi React 19 yang dapat dicari dan dicetak — komponen, JSX, hook, API Actions baru, context, ref, dan performa. Gratis.
Komponen & JSX
12function App() { return <h1>Hi</h1>; }
Komponen fungsi yang mengembalikan JSX
export default function App() {}
Ekspor-default sebuah komponen
<Greeting name="Ada" />
Render komponen dengan props
{1 + 2} or {user.name}
Sematkan ekspresi JS dengan kurung kurawal
<>{a}{b}</>
Fragment mengelompokkan node, tanpa DOM tambahan
<div className="card">
Gunakan className, bukan class, untuk CSS
{isOpen && <Menu />}
Render secara kondisional dengan &&
{ok ? <Yes /> : <No />}
Pilih antar node dengan ternary
{items.map(i => <li key={i.id}>{i.t}</li>)}
Render list dari array
function Btn({ label, onClick }) {}
Destrukturkan props di signature
function Card({ children }) { return children; }
Baca JSX bersarang via prop children
<input value={v} onChange={onChange} />
Input terkontrol yang terikat ke state
Rendering & penyiapan
10import { createRoot } from 'react-dom/client'
Impor API root klien
createRoot(document.getElementById('root')).render(<App/>)
Mount aplikasi ke dalam DOM
import { StrictMode } from 'react'
Impor pembungkus StrictMode
<StrictMode><App /></StrictMode>
Munculkan bug saat pengembangan
import { hydrateRoot } from 'react-dom/client'
Impor API hidrasi
hydrateRoot(el, <App />)
Lampirkan React ke HTML server
root.unmount()
Bongkar root yang ter-mount
import App from './App.jsx'
Impor komponen dari sebuah modul
<App {...props} />
Sebar objek sebagai props
export { Button, Card }
Ekspor-bernama beberapa komponen
State & efek
12const [count, setCount] = useState(0)
Deklarasikan variabel state
setCount(c => c + 1)
Perbarui dari nilai sebelumnya
setUser(u => ({ ...u, name }))
Perbarui state objek secara immutable
useEffect(() => { run(); }, [dep])
Jalankan efek saat dependensi berubah
useEffect(() => { /* once */ }, [])
Jalankan efek hanya saat mount
useEffect(() => () => cleanup(), [])
Kembalikan fungsi pembersihan
const ref = useRef(null)
Tahan nilai mutable di seluruh render
const [state, dispatch] = useReducer(r, init)
Kelola state kompleks dengan reducer
const theme = useContext(ThemeContext)
Baca nilai context terdekat
const memo = useMemo(() => calc(a), [a])
Memoisasi komputasi yang mahal
useLayoutEffect(() => {}, [])
Jalankan secara sinkron setelah layout
useSyncExternalStore(sub, get)
Berlangganan ke store eksternal
Hook & API React 19
12import { use } from 'react'
Impor API use baru
const data = use(promise)
Baca promise, menangguhkan hingga siap
const theme = use(ThemeContext)
Baca context, diizinkan secara kondisional
const [state, action, pending] = useActionState(fn, init)
Lacak state, action, dan pending
const [opt, addOpt] = useOptimistic(state, reducer)
Tampilkan nilai optimistis secara instan
const { pending } = useFormStatus()
Baca status submit formulir induk
const [isPending, startTransition] = useTransition()
Tandai pembaruan sebagai non-urgen
startTransition(async () => await save())
Jalankan Action asinkron dalam transisi
const deferred = useDeferredValue(value)
Tunda nilai agar UI tetap responsif
const id = useId()
Hasilkan id unik yang stabil
<title>Page title</title>
Render metadata di mana saja dalam tree
function Input({ ref }) {}
ref adalah prop biasa, tanpa forwardRef
Formulir & Action
12<form action={handleSubmit}>
Berikan fungsi sebagai Action formulir
function handleSubmit(formData) {}
Action menerima FormData
formData.get('email')
Baca field dari FormData
const [state, action] = useActionState(submit, null)
Hubungkan Action ke state komponen
<form action={action}>
Gunakan Action terbungkus pada formulir
const [s, a, pending] = useActionState(fn, init)
Ekspos flag pending untuk UI
return { error: 'Invalid' }
Kembalikan state galat dari sebuah Action
function Submit() { const { pending } = useFormStatus() }
Baca pending di dalam tombol submit
<button disabled={pending}>Save</button>
Nonaktifkan submit saat pending
import { requestFormReset } from 'react-dom'
Impor helper reset formulir
requestFormReset(formEl)
Reset formulir tak terkontrol
<form action={action}><Submit /></form>
Susun formulir Action dengan status
Props & komposisi
10function Hi({ name = 'Guest' }) {}
Prop default via destrukturisasi
function Box({ children }) { return children; }
Bungkus konten dengan prop children
<Box><p>Inside</p></Box>
Berikan JSX sebagai children
function List({ render }) { return render(); }
Pola render prop
<List render={() => <Item />} />
Sediakan fungsi render
<Input {...props} />
Teruskan semua props dengan spread
const { id, ...rest } = props
Pilih satu prop dan teruskan sisanya
<Avatar {...rest} size="lg" />
Sebar lalu timpa sebuah prop
function Btn(props: BtnProps) {}
Beri tipe props dengan interface TypeScript
<Slot label={<b>Hi</b>} />
Berikan JSX melalui prop bernama
Event
10<button onClick={handleClick}>
Lampirkan handler klik
function handleClick(e) {}
Terima event sintetis
<input onChange={e => set(e.target.value)} />
Baca nilai input saat berubah
<form onSubmit={e => e.preventDefault()}>
Hentikan submit formulir default
e.stopPropagation()
Cegah event dari bubbling
<li onClick={() => remove(id)}>
Berikan argumen dengan closure
<input onKeyDown={e => e.key === 'Enter'}
Tangani penekanan tombol tertentu
<div onMouseEnter={hover}>
Dengarkan event pointer
e.currentTarget.value
Baca elemen tempat handler berada
<button onClick={() => {}} type="button">
Hindari pengiriman formulir implisit
List & key
10arr.map(x => <li key={x.id}>{x.t}</li>)
Render satu node per item
key={item.id}
Beri setiap item key yang stabil
key={index}
Key index hanya untuk list statis
users.map(u => <Card key={u.id} {...u} />)
Sebar field item sebagai props
{list.length === 0 && <Empty />}
Tampilkan fallback untuk list kosong
import { Fragment } from 'react'
Impor Fragment untuk grup berkey
<Fragment key={id}>{a}{b}</Fragment>
Fragment berkey dalam sebuah list
{rows.filter(r => r.on).map(...)}
Filter sebelum mapping
Keys must be unique among siblings
Mengapa key membantu React mem-diff list
{[...Array(n)].map((_, i) => ...)}
Map rentang berpanjang tetap
Context
10const ThemeContext = createContext('light')
Buat context dengan default
import { createContext } from 'react'
Impor factory context
<ThemeContext value={theme}>
Sediakan nilai (sintaks React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Bungkus tree yang membacanya
const theme = useContext(ThemeContext)
Baca context dengan useContext
const theme = use(ThemeContext)
Baca context dengan API use
if (cond) { const t = use(Ctx); }
use dapat membaca context secara kondisional
export const ThemeContext = createContext()
Ekspor context bersama
<Ctx value={{ user, setUser }}>
Berikan objek sebagai nilai
Avoid new objects each render
Memoisasi nilai untuk membatasi re-render
Ref
10const inputRef = useRef(null)
Buat penampung ref
<input ref={inputRef} />
Lampirkan ref ke sebuah node
inputRef.current.focus()
Akses node DOM via current
function Field({ ref }) { return <input ref={ref} /> }
ref sebagai prop, tanpa forwardRef
<Field ref={inputRef} />
Berikan ref ke sebuah komponen
useImperativeHandle(ref, () => ({ focus }))
Ekspos API imperatif
const setRef = node => { box = node; }
Gunakan callback ref
<div ref={setRef} />
Lampirkan callback ref
const count = useRef(0)
Simpan nilai tanpa render ulang
ref={node => { return () => cleanup(); }}
Callback ref dengan pembersihan (React 19)
Performa
10const Memo = memo(Component)
Lewati render ulang saat props sama
import { memo } from 'react'
Impor helper memo
const value = useMemo(() => calc(a), [a])
Cache nilai terhitung
const fn = useCallback(() => f(a), [a])
Cache identitas fungsi
const Lazy = lazy(() => import('./Big.jsx'))
Code-split sebuah komponen
import { lazy, Suspense } from 'react'
Impor lazy dan Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Tampilkan fallback saat memuat
startTransition(() => setQuery(q))
Tandai pembaruan state non-urgen
const slow = useDeferredValue(query)
Tunda UI turunan yang mahal
React Compiler auto-memoizes
Sering menghilangkan memoisasi manual
Lain-lain & metadata
10<Suspense fallback={<Loading />}>
Boundary untuk konten asinkron
class ErrorBoundary extends Component {}
Tangkap galat render (kelas lama)
<title>My Page</title>
Angkat judul dokumen dari sebuah komponen
<meta name="description" content="..." />
Render tag meta ke dalam head
<link rel="stylesheet" href="..." />
Angkat tautan stylesheet
<Comp key={id} />
Ubah key untuk me-remount komponen
React.lazy(() => import('./Page.jsx'))
Impor komponen rute secara lazy
createPortal(node, container)
Render ke node DOM yang berbeda
{/* a comment */}
Tulis komentar di dalam JSX
cleanup return in useEffect
Selalu lepaskan langganan/timer
Tidak ada entri yang cocok dengan “:q”.
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.