React চিট শিট

বিনামূল্যে

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

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, প্রপস ও কম্পোজিশন, ইভেন্ট, লিস্ট ও কী, কনটেক্সট, রেফ, পারফরম্যান্স, এবং মেটাডেটাসহ অন্যান্য বিষয়।

এটি প্রতিটি কম্পোনেন্টে ব্যবহৃত মৌলিক বিষয়গুলো — useState, useEffect, প্রপস, কী, কন্ট্রোল্ড ইনপুট — এবং Actions-ভিত্তিক ফর্ম প্যাটার্নসহ নতুন React 19 সংযোজন উভয়ই কভার করে, ফলে এটি একটি রিফ্রেশার হিসেবে এবং বর্তমান API-তে যাওয়ার সেতু হিসেবে কাজ করে।

শিটটি বিনামূল্যে এবং ক্লায়েন্ট-সাইডে কাজ করে। সার্চ বক্স দিয়ে হুক ও প্যাটার্ন সরাসরি ফিল্টার করুন, স্টিকি সূচিপত্র থেকে সেকশনে যান, এক ক্লিকে যেকোনো স্নিপেট কপি করুন এবং কম্পোনেন্ট তৈরির সময় রেফারেন্স হিসেবে পাতাটি প্রিন্ট করুন।

React চিট শিট কীভাবে ব্যবহার করবেন

সেকশনগুলো চোখ বুলিয়ে দেখুন, Components & JSX ও State & effects থেকে React 19 hooks & APIs এবং Performance পর্যন্ত।
useEffect, key বা context-এর মতো কোনো হুক বা ধারণা খুঁজে শিটটি সরাসরি ফিল্টার করুন।
নির্দিষ্ট কোনো প্যাটার্ন দরকার হলে স্টিকি সাইডবার দিয়ে Forms & Actions বা Refs-এ চলে যান।
কোনো স্নিপেট বা এর কপি আইকনে ক্লিক করে কোডটি আপনার কম্পোনেন্টে কপি করুন।
অফলাইন React রেফারেন্স হিসেবে শিটটি প্রিন্ট করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন

হ্যাঁ। দীর্ঘদিনের মৌলিক বিষয়গুলোর পাশাপাশি এতে একটি নিবেদিত React 19 হুক ও API সেকশন এবং নতুন Actions প্যাটার্নের ওপর ভিত্তি করে একটি ফর্ম সেকশন রয়েছে।

বারোটি সেকশন: কম্পোনেন্ট ও JSX, রেন্ডারিং ও সেটআপ, স্টেট ও ইফেক্ট, React 19 হুক ও API, ফর্ম ও Actions, প্রপস ও কম্পোজিশন, ইভেন্ট, লিস্ট ও কী, কনটেক্সট, রেফ, পারফরম্যান্স, এবং মেটাডেটাসহ অন্যান্য বিষয়।

হ্যাঁ। স্টেট ও ইফেক্ট সেকশনে সাধারণ ভ্যারিয়েন্টসহ useState ও useEffect-এর ব্যবহার দেখানো হয়েছে, এবং কনটেক্সট, রেফ ও পারফরম্যান্স সেকশনগুলো সংশ্লিষ্ট প্রতিটি বিষয়ের হুক কভার করে।

হ্যাঁ। যেকোনো কোড স্নিপেট বা এর হোভার কপি আইকনে ক্লিক করলেই তা একটি সংক্ষিপ্ত নিশ্চিতকরণসহ আপনার ক্লিপবোর্ডে চলে আসে।

হ্যাঁ, সম্পূর্ণ বিনামূল্যে — সার্চযোগ্য, প্রিন্টযোগ্য এবং সাইন-আপ ছাড়াই আপনার ব্রাউজারে রেন্ডার হয়।

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 রেফারেন্সটি কি বিনামূল্যে?

সম্পর্কিত টুলসমূহ

জনপ্রিয় অনুসন্ধান

এই টুলটি এম্বেড করুন