React चीट शीट

निःशुल्क

खोजने और प्रिंट करने योग्य React 19 संदर्भ — कंपोनेंट, JSX, हुक, नए Actions API, कॉन्टेक्स्ट, refs और परफ़ॉर्मेंस। निःशुल्क।

Component और JSX

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

JSX लौटाने वाला function component

export default function App() {}

component को default-export करें

<Greeting name="Ada" />

props के साथ component render करें

{1 + 2} or {user.name}

braces के साथ JS expression embed करें

<>{a}{b}</>

Fragment node समूहित करता है, कोई अतिरिक्त DOM नहीं

<div className="card">

CSS हेतु class नहीं, className उपयोग करें

{isOpen && <Menu />}

&& के साथ सशर्त render करें

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

ternary से node के बीच चुनें

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

array से list render करें

function Btn({ label, onClick }) {}

signature में props destructure करें

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

children prop से nested JSX पढ़ें

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

state से बंधा controlled input

Rendering और setup

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

client root API import करें

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

ऐप को DOM में माउंट करें

import { StrictMode } from 'react'

StrictMode wrapper import करें

<StrictMode><App /></StrictMode>

development में bug सामने लाएं

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

hydration API import करें

hydrateRoot(el, <App />)

React को server HTML से संलग्न करें

root.unmount()

माउंट किया root हटाएं

import App from './App.jsx'

module से component import करें

<App {...props} />

object को props के रूप में spread करें

export { Button, Card }

कई component को named-export करें

State और effect

const [count, setCount] = useState(0)

state वेरिएबल घोषित करें

setCount(c => c + 1)

पिछले मान से अपडेट करें

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

object state अपरिवर्तनीय रूप से अपडेट करें

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

deps बदलने पर effect चलाएं

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

केवल mount पर effect चलाएं

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

cleanup function लौटाएं

const ref = useRef(null)

render भर परिवर्तनीय मान रखें

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

reducer से जटिल state प्रबंधित करें

const theme = useContext(ThemeContext)

निकटतम context मान पढ़ें

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

महंगी गणना को memoize करें

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

layout के बाद synchronously चलाएं

useSyncExternalStore(sub, get)

बाहरी store की subscribe करें

React 19 hook और API

import { use } from 'react'

नया use API import करें

const data = use(promise)

promise पढ़ें, तैयार होने तक suspend करता है

const theme = use(ThemeContext)

context पढ़ें, सशर्त अनुमत

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

state, action और pending ट्रैक करें

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

तुरंत एक optimistic मान दिखाएं

const { pending } = useFormStatus()

parent form submit स्थिति पढ़ें

const [isPending, startTransition] = useTransition()

अपडेट को गैर-तत्काल चिह्नित करें

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

transition में async Action चलाएं

const deferred = useDeferredValue(value)

UI responsive रखने मान defer करें

const id = useId()

स्थिर unique id उत्पन्न करें

<title>Page title</title>

tree में कहीं भी metadata render करें

function Input({ ref }) {}

ref एक सामान्य prop है, कोई forwardRef नहीं

Form और Action

<form action={handleSubmit}>

function को form Action के रूप में पास करें

function handleSubmit(formData) {}

Action को FormData मिलता है

formData.get('email')

FormData से फ़ील्ड पढ़ें

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

Action को component state से जोड़ें

<form action={action}>

form पर wrapped Action उपयोग करें

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

UI हेतु pending फ़्लैग उजागर करें

return { error: 'Invalid' }

Action से error state लौटाएं

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

submit button के अंदर pending पढ़ें

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

pending के दौरान submit अक्षम करें

import { requestFormReset } from 'react-dom'

form reset helper import करें

requestFormReset(formEl)

uncontrolled form रीसेट करें

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

status के साथ Action form बनाएं

Props और composition

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

destructuring से डिफ़ॉल्ट prop

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

children prop से सामग्री wrap करें

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

JSX को children के रूप में पास करें

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

Render prop पैटर्न

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

render function प्रदान करें

<Input {...props} />

spread से सभी props forward करें

const { id, ...rest } = props

एक prop चुनें और बाकी पास करें

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

spread करें फिर prop ओवरराइड करें

function Btn(props: BtnProps) {}

TypeScript interface से props type करें

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

नामित prop से JSX पास करें

इवेंट

<button onClick={handleClick}>

click handler संलग्न करें

function handleClick(e) {}

synthetic event प्राप्त करें

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

change पर input मान पढ़ें

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

डिफ़ॉल्ट form submit रोकें

e.stopPropagation()

event को bubbling से रोकें

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

closure के साथ argument पास करें

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

विशिष्ट key press संभालें

<div onMouseEnter={hover}>

pointer event सुनें

e.currentTarget.value

जिस एलिमेंट पर handler है उसे पढ़ें

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

अप्रत्यक्ष form submission से बचें

List और key

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

प्रति आइटम एक node render करें

key={item.id}

प्रत्येक आइटम को स्थिर key दें

key={index}

index key केवल static list हेतु

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

आइटम फ़ील्ड को props के रूप में spread करें

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

खाली list हेतु fallback दिखाएं

import { Fragment } from 'react'

keyed समूह हेतु Fragment import करें

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

list में keyed fragment

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

mapping से पहले फ़िल्टर करें

Keys must be unique among siblings

key React को list diff में कैसे मदद करते हैं

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

निश्चित-लंबाई range मैप करें

Context

const ThemeContext = createContext('light')

डिफ़ॉल्ट के साथ context बनाएं

import { createContext } from 'react'

context factory import करें

<ThemeContext value={theme}>

मान प्रदान करें (React 19 सिंटैक्स)

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

इसे पढ़ने वाले tree को wrap करें

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 export करें

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

object को मान के रूप में पास करें

Avoid new objects each render

re-render सीमित करने मान memoize करें

Ref

const inputRef = useRef(null)

ref holder बनाएं

<input ref={inputRef} />

ref को node से संलग्न करें

inputRef.current.focus()

current से DOM node एक्सेस करें

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

ref एक prop के रूप में, कोई forwardRef नहीं

<Field ref={inputRef} />

component को ref पास करें

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

imperative API उजागर करें

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

callback ref उपयोग करें

<div ref={setRef} />

callback ref संलग्न करें

const count = useRef(0)

बिना re-render मान संग्रहीत करें

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

cleanup के साथ callback ref (React 19)

प्रदर्शन

const Memo = memo(Component)

props समान होने पर re-render छोड़ें

import { memo } from 'react'

memo helper import करें

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

गणना किया मान कैश करें

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

function पहचान कैश करें

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

component को code-split करें

import { lazy, Suspense } from 'react'

lazy और Suspense import करें

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

लोड होते समय fallback दिखाएं

startTransition(() => setQuery(q))

गैर-तत्काल state अपडेट चिह्नित करें

const slow = useDeferredValue(query)

महंगी व्युत्पन्न UI defer करें

React Compiler auto-memoizes

अक्सर मैन्युअल memoization हटा देता है

विविध और metadata

<Suspense fallback={<Loading />}>

async सामग्री हेतु boundary

class ErrorBoundary extends Component {}

render त्रुटियां पकड़ें (legacy class)

<title>My Page</title>

component से document title hoist करें

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

head में meta tag render करें

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

stylesheet link hoist करें

<Comp key={id} />

component remount करने key बदलें

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

route component को lazily import करें

createPortal(node, container)

एक अलग DOM node में render करें

{/* a comment */}

JSX के अंदर टिप्पणी लिखें

cleanup return in useEffect

हमेशा subscription/timer रिलीज़ करें

कोई प्रविष्टि “:q” से मेल नहीं खाती।

मदद चाहिए?

इस टूल में कोई समस्या मिली? हमारी टीम को बताएं।

समस्या की रिपोर्ट करें

इस मुफ़्त टूल को अपनी वेबसाइट पर जोड़ें — नीचे दिया गया कोड कॉपी और पेस्ट करें।

<iframe src="https://tweakee.com/hi/studio/dev/react-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>