React চিট শিট

বিনামূল্যে

অনুসন্ধানযোগ্য, প্রিন্টযোগ্য React 19 রেফারেন্স — কম্পোনেন্ট, JSX, হুক, নতুন Actions API, কন্টেক্সট, refs এবং পারফরম্যান্স। বিনামূল্যে।

Component ও JSX

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

JSX return করা function component

export default function App() {}

component default-export করুন

<Greeting name="Ada" />

props সহ component render করুন

{1 + 2} or {user.name}

brace দিয়ে JS expression embed করুন

<>{a}{b}</>

Fragment node group করে, অতিরিক্ত 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-এ bound controlled input

Rendering ও সেটআপ

import { 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-এ bug প্রকাশ করুন

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

hydration API import করুন

hydrateRoot(el, <App />)

server HTML-এ React যুক্ত করুন

root.unmount()

mounted root tear down করুন

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 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 return করুন

const ref = useRef(null)

render জুড়ে 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 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 status পড়ুন

const [isPending, startTransition] = useTransition()

update-কে non-urgent চিহ্নিত করুন

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

transition-এ async Action চালান

const deferred = useDeferredValue(value)

UI responsive রাখতে মান defer করুন

const id = useId()

stable unique id তৈরি করুন

<title>Page title</title>

tree-র যেকোনো জায়গায় metadata render করুন

function Input({ ref }) {}

ref সাধারণ prop, forwardRef নেই

Form ও Action

<form action={handleSubmit}>

form Action হিসেবে function পাঠান

function handleSubmit(formData) {}

Action FormData গ্রহণ করে

formData.get('email')

FormData থেকে ফিল্ড পড়ুন

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

component state-এ Action wire করুন

<form action={action}>

form-এ wrapped Action ব্যবহার করুন

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

UI-এর জন্য pending flag প্রকাশ করুন

return { error: 'Invalid' }

Action থেকে error state return করুন

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 reset করুন

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

status সহ Action form compose করুন

Props ও composition

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

destructuring-এ ডিফল্ট prop

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

children prop দিয়ে content wrap করুন

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

children হিসেবে JSX পাঠান

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 override করুন

function Btn(props: BtnProps) {}

TypeScript interface দিয়ে props type করুন

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

নামযুক্ত prop-এ JSX পাঠান

Event

<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-এর জন্য listen করুন

e.currentTarget.value

handler যে element-এ আছে তা পড়ুন

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

implicit form submission এড়িয়ে চলুন

List ও key

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

প্রতি আইটেমে এক node render করুন

key={item.id}

প্রতি আইটেমে stable key দিন

key={index}

শুধু static list-এ index key

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

আইটেম ফিল্ড props হিসেবে spread করুন

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

খালি list-এর জন্য fallback দেখান

import { Fragment } from 'react'

keyed group-এর জন্য 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) => ...)}

fixed-length range map করুন

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()

shared 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} />

node-এ ref যুক্ত করুন

inputRef.current.focus()

current-এ DOM node অ্যাক্সেস করুন

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

prop হিসেবে ref, 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

const Memo = memo(Component)

props সমান হলে re-render skip করুন

import { memo } from 'react'

memo helper import করুন

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

computed মান cache করুন

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

function identity cache করুন

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))

non-urgent state update চিহ্নিত করুন

const slow = useDeferredValue(query)

ব্যয়বহুল derived UI defer করুন

React Compiler auto-memoizes

প্রায়ই ম্যানুয়াল memoization সরায়

বিবিধ ও metadata

<Suspense fallback={<Loading />}>

async content-এর জন্য boundary

class ErrorBoundary extends Component {}

render error ধরুন (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-এর ভিতরে comment লিখুন

cleanup return in useEffect

সবসময় subscription/timer release করুন

“:q”-এর সাথে কোনো এন্ট্রি মেলে না।

সাহায্য দরকার?

এই টুলে কোনো সমস্যা পেয়েছেন? আমাদের দলকে জানান।

সমস্যা রিপোর্ট করুন

আপনার নিজের ওয়েবসাইটে এই বিনামূল্যের টুলটি যোগ করুন — নিচের কোডটি কপি করে পেস্ট করুন।

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