React چیٹ شیٹ
قابلِ تلاش اور قابلِ پرنٹ React 19 حوالہ — کمپوننٹس، JSX، hooks، نئے Actions APIs، context، refs اور کارکردگی۔ مفت۔
components اور JSX
12function 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 شامل کریں
<>{a}{b}</>
Fragment nodes گروپ کرتا ہے، اضافی DOM نہیں
<div className="card">
CSS کے لیے class نہیں، className استعمال کریں
{isOpen && <Menu />}
&& سے مشروط render کریں
{ok ? <Yes /> : <No />}
ternary سے nodes کے درمیان انتخاب کریں
{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 سے bound controlled input
rendering اور setup
10import { createRoot } from 'react-dom/client'
client root API import کریں
createRoot(document.getElementById('root')).render(<App/>)
ایپ کو DOM میں mount کریں
import { StrictMode } from 'react'
StrictMode wrapper import کریں
<StrictMode><App /></StrictMode>
development میں bugs ظاہر کریں
import { hydrateRoot } from 'react-dom/client'
hydration API import کریں
hydrateRoot(el, <App />)
React کو server HTML سے منسلک کریں
root.unmount()
mounted root ختم کریں
import App from './App.jsx'
module سے component import کریں
<App {...props} />
object کو props کے طور پر spread کریں
export { Button, Card }
متعدد components named-export کریں
state اور effects
12const [count, setCount] = useState(0)
state variable کا اعلان کریں
setCount(c => c + 1)
پچھلی ویلیو سے اپ ڈیٹ کریں
setUser(u => ({ ...u, name }))
object state کو immutably اپ ڈیٹ کریں
useEffect(() => { run(); }, [dep])
deps بدلنے پر effect چلائیں
useEffect(() => { /* once */ }, [])
صرف mount پر effect چلائیں
useEffect(() => () => cleanup(), [])
cleanup function لوٹائیں
const ref = useRef(null)
renders کے دوران mutable ویلیو رکھیں
const [state, dispatch] = useReducer(r, init)
reducer سے پیچیدہ state سنبھالیں
const theme = useContext(ThemeContext)
قریب ترین context ویلیو پڑھیں
const memo = useMemo(() => calc(a), [a])
مہنگی computation کو memoize کریں
useLayoutEffect(() => {}, [])
layout کے بعد synchronously چلائیں
useSyncExternalStore(sub, get)
external store کو subscribe کریں
React 19 hooks اور APIs
12import { 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 status پڑھیں
const [isPending, startTransition] = useTransition()
updates کو non-urgent نشان زد کریں
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 نہیں
Forms اور Actions
12<form action={handleSubmit}>
function کو form Action کے طور پر پاس کریں
function handleSubmit(formData) {}
Action کو FormData ملتا ہے
formData.get('email')
FormData سے field پڑھیں
const [state, action] = useActionState(submit, null)
Action کو component state سے جوڑیں
<form action={action}>
form پر wrapped Action استعمال کریں
const [s, a, pending] = useActionState(fn, init)
UI کے لیے pending flag ظاہر کریں
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
10function Hi({ name = 'Guest' }) {}
destructuring کے ذریعے ڈیفالٹ prop
function Box({ children }) { return children; }
children prop سے مواد لپیٹیں
<Box><p>Inside</p></Box>
JSX کو children کے طور پر پاس کریں
function List({ render }) { return render(); }
render prop pattern
<List render={() => <Item />} />
render function فراہم کریں
<Input {...props} />
spread سے تمام props forward کریں
const { id, ...rest } = props
ایک prop چنیں اور باقی پاس کریں
<Avatar {...rest} size="lg" />
spread کریں پھر prop override کریں
function Btn(props: BtnProps) {}
TypeScript interfaces سے props type کریں
<Slot label={<b>Hi</b>} />
named prop کے ذریعے JSX پاس کریں
events
10<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 کے ساتھ arguments پاس کریں
<input onKeyDown={e => e.key === 'Enter'}
مخصوص key press سنبھالیں
<div onMouseEnter={hover}>
pointer events سنیں
e.currentTarget.value
handler جس element پر ہے اسے پڑھیں
<button onClick={() => {}} type="button">
implicit form submission سے بچیں
lists اور keys
10arr.map(x => <li key={x.id}>{x.t}</li>)
ہر item کے لیے ایک node render کریں
key={item.id}
ہر item کو مستحکم key دیں
key={index}
index keys صرف static lists کے لیے
users.map(u => <Card key={u.id} {...u} />)
item fields کو props کے طور پر spread کریں
{list.length === 0 && <Empty />}
خالی lists کے لیے fallback دکھائیں
import { Fragment } from 'react'
keyed groups کے لیے Fragment import کریں
<Fragment key={id}>{a}{b}</Fragment>
list میں ایک keyed fragment
{rows.filter(r => r.on).map(...)}
mapping سے پہلے فلٹر کریں
Keys must be unique among siblings
keys React کو lists diff میں کیوں مدد دیتی ہیں
{[...Array(n)].map((_, i) => ...)}
fixed-length range map کریں
context
10const ThemeContext = createContext('light')
ڈیفالٹ کے ساتھ context بنائیں
import { createContext } from 'react'
context factory import کریں
<ThemeContext value={theme}>
ویلیو فراہم کریں (React 19 syntax)
<ThemeContext value={theme}><App /></ThemeContext>
اسے پڑھنے والے tree کو لپیٹیں
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()
shared context export کریں
<Ctx value={{ user, setUser }}>
object کو ویلیو کے طور پر پاس کریں
Avoid new objects each render
re-renders محدود کرنے کو values memoize کریں
refs
10const 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)
performance
10const Memo = memo(Component)
props برابر ہونے پر re-render چھوڑیں
import { memo } from 'react'
memo helper import کریں
const value = useMemo(() => calc(a), [a])
computed ویلیو کیش کریں
const fn = useCallback(() => f(a), [a])
function identity کیش کریں
const Lazy = lazy(() => import('./Big.jsx'))
component کو code-split کریں
import { lazy, Suspense } from 'react'
lazy اور Suspense import کریں
<Suspense fallback={<Spin />}><Lazy /></Suspense>
loading کے دوران fallback دکھائیں
startTransition(() => setQuery(q))
non-urgent state updates نشان زد کریں
const slow = useDeferredValue(query)
مہنگی derived UI defer کریں
React Compiler auto-memoizes
اکثر دستی memoization ختم کرتا ہے
متفرق اور metadata
10<Suspense fallback={<Loading />}>
async مواد کے لیے boundary
class ErrorBoundary extends Component {}
render errors پکڑیں (legacy class)
<title>My Page</title>
component سے document title hoist کریں
<meta name="description" content="..." />
head میں meta tags 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 کے اندر comment لکھیں
cleanup return in useEffect
ہمیشہ subscriptions/timers جاری کریں
کوئی اندراج “:q” سے میل نہیں کھاتا۔
مدد چاہیے؟
اس ٹول میں کوئی مسئلہ ملا؟ ہماری ٹیم کو بتائیں۔