Foaie de referință React
O referință React 19 căutabilă și imprimabilă — componente, JSX, hooks, noile API-uri Actions, context, refs și performanță. Gratuit.
Componente și JSX
12function App() { return <h1>Hi</h1>; }
O componentă funcție care returnează JSX
export default function App() {}
Export implicit al unei componente
<Greeting name="Ada" />
Randează o componentă cu props
{1 + 2} or {user.name}
Încorporează o expresie JS cu acolade
<>{a}{b}</>
Fragment grupează noduri, fără DOM suplimentar
<div className="card">
Folosește className, nu class, pentru CSS
{isOpen && <Menu />}
Randează condițional cu &&
{ok ? <Yes /> : <No />}
Alege între noduri cu un ternar
{items.map(i => <li key={i.id}>{i.t}</li>)}
Randează o listă dintr-un array
function Btn({ label, onClick }) {}
Destructurează props în semnătură
function Card({ children }) { return children; }
Citește JSX imbricat prin prop-ul children
<input value={v} onChange={onChange} />
Input controlat legat de state
Randare și configurare
10import { createRoot } from 'react-dom/client'
Importă API-ul de root client
createRoot(document.getElementById('root')).render(<App/>)
Montează aplicația în DOM
import { StrictMode } from 'react'
Importă wrapper-ul StrictMode
<StrictMode><App /></StrictMode>
Scoate la iveală bug-uri în dezvoltare
import { hydrateRoot } from 'react-dom/client'
Importă API-ul de hydration
hydrateRoot(el, <App />)
Atașează React la HTML-ul de server
root.unmount()
Demontează un root montat
import App from './App.jsx'
Importă o componentă dintr-un modul
<App {...props} />
Spread un obiect ca props
export { Button, Card }
Export numit pentru mai multe componente
State și efecte
12const [count, setCount] = useState(0)
Declară o variabilă de state
setCount(c => c + 1)
Actualizează din valoarea anterioară
setUser(u => ({ ...u, name }))
Actualizează state-ul de obiect imutabil
useEffect(() => { run(); }, [dep])
Rulează un efect când se schimbă dependențele
useEffect(() => { /* once */ }, [])
Rulează un efect doar la montare
useEffect(() => () => cleanup(), [])
Returnează o funcție de curățare
const ref = useRef(null)
Păstrează o valoare mutabilă între randări
const [state, dispatch] = useReducer(r, init)
Gestionează state complex cu un reducer
const theme = useContext(ThemeContext)
Citește cea mai apropiată valoare de context
const memo = useMemo(() => calc(a), [a])
Memoizează un calcul costisitor
useLayoutEffect(() => {}, [])
Rulează sincron după layout
useSyncExternalStore(sub, get)
Abonează-te la un store extern
Hook-uri și API-uri React 19
12import { use } from 'react'
Importă noul API use
const data = use(promise)
Citește un promise, suspendă până e gata
const theme = use(ThemeContext)
Citește context, permis condițional
const [state, action, pending] = useActionState(fn, init)
Urmărește state, action și pending
const [opt, addOpt] = useOptimistic(state, reducer)
Afișează instant o valoare optimistă
const { pending } = useFormStatus()
Citește starea de submit a formularului părinte
const [isPending, startTransition] = useTransition()
Marchează actualizările ca non-urgente
startTransition(async () => await save())
Rulează un Action asincron într-o tranziție
const deferred = useDeferredValue(value)
Amână o valoare pentru a păstra UI-ul responsiv
const id = useId()
Generează un id unic stabil
<title>Page title</title>
Randează metadate oriunde în arbore
function Input({ ref }) {}
ref e un prop normal, fără forwardRef
Formulare și Actions
12<form action={handleSubmit}>
Pasează o funcție ca Action de formular
function handleSubmit(formData) {}
Action-ul primește FormData
formData.get('email')
Citește un câmp din FormData
const [state, action] = useActionState(submit, null)
Conectează un Action la state-ul componentei
<form action={action}>
Folosește Action-ul învelit pe formular
const [s, a, pending] = useActionState(fn, init)
Expune un flag pending pentru UI
return { error: 'Invalid' }
Returnează state de eroare dintr-un Action
function Submit() { const { pending } = useFormStatus() }
Citește pending în interiorul butonului de submit
<button disabled={pending}>Save</button>
Dezactivează submit cât timp e pending
import { requestFormReset } from 'react-dom'
Importă helper-ul de resetare a formularului
requestFormReset(formEl)
Resetează un formular necontrolat
<form action={action}><Submit /></form>
Compune un formular Action cu status
Props și compoziție
10function Hi({ name = 'Guest' }) {}
Prop implicit prin destructurare
function Box({ children }) { return children; }
Învelește conținut cu prop-ul children
<Box><p>Inside</p></Box>
Pasează JSX ca children
function List({ render }) { return render(); }
Pattern render prop
<List render={() => <Item />} />
Furnizează o funcție de randare
<Input {...props} />
Forwardează toate props cu spread
const { id, ...rest } = props
Alege un prop și pasează restul
<Avatar {...rest} size="lg" />
Spread apoi suprascrie un prop
function Btn(props: BtnProps) {}
Tipizează props cu interfețe TypeScript
<Slot label={<b>Hi</b>} />
Pasează JSX printr-un prop numit
Evenimente
10<button onClick={handleClick}>
Atașează un handler de click
function handleClick(e) {}
Primește evenimentul sintetic
<input onChange={e => set(e.target.value)} />
Citește o valoare de input la schimbare
<form onSubmit={e => e.preventDefault()}>
Oprește submit-ul implicit al formularului
e.stopPropagation()
Împiedică propagarea evenimentului
<li onClick={() => remove(id)}>
Pasează argumente cu un closure
<input onKeyDown={e => e.key === 'Enter'}
Tratează o apăsare de tastă specifică
<div onMouseEnter={hover}>
Ascultă evenimente de pointer
e.currentTarget.value
Citește elementul pe care e handler-ul
<button onClick={() => {}} type="button">
Evită trimiterea implicită a formularului
Liste și chei
10arr.map(x => <li key={x.id}>{x.t}</li>)
Randează un nod per element
key={item.id}
Dă fiecărui element o cheie stabilă
key={index}
Chei de index doar pentru liste statice
users.map(u => <Card key={u.id} {...u} />)
Spread câmpurile elementului ca props
{list.length === 0 && <Empty />}
Afișează o rezervă pentru liste goale
import { Fragment } from 'react'
Importă Fragment pentru grupuri cu cheie
<Fragment key={id}>{a}{b}</Fragment>
Un fragment cu cheie într-o listă
{rows.filter(r => r.on).map(...)}
Filtrează înainte de mapare
Keys must be unique among siblings
De ce cheile ajută React să compare listele
{[...Array(n)].map((_, i) => ...)}
Mapează un interval de lungime fixă
Context
10const ThemeContext = createContext('light')
Creează un context cu o valoare implicită
import { createContext } from 'react'
Importă fabrica de context
<ThemeContext value={theme}>
Furnizează o valoare (sintaxă React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Învelește arborele care îl citește
const theme = useContext(ThemeContext)
Citește context cu useContext
const theme = use(ThemeContext)
Citește context cu API-ul use
if (cond) { const t = use(Ctx); }
use poate citi context condițional
export const ThemeContext = createContext()
Exportă un context partajat
<Ctx value={{ user, setUser }}>
Pasează un obiect ca valoare
Avoid new objects each render
Memoizează valori pentru a limita re-randările
Refs
10const inputRef = useRef(null)
Creează un suport de ref
<input ref={inputRef} />
Atașează ref-ul la un nod
inputRef.current.focus()
Accesează nodul DOM prin current
function Field({ ref }) { return <input ref={ref} /> }
ref ca prop, fără forwardRef
<Field ref={inputRef} />
Pasează un ref unei componente
useImperativeHandle(ref, () => ({ focus }))
Expune un API imperativ
const setRef = node => { box = node; }
Folosește un callback ref
<div ref={setRef} />
Atașează un callback ref
const count = useRef(0)
Stochează o valoare fără re-randare
ref={node => { return () => cleanup(); }}
Callback ref cu curățare (React 19)
Performanță
10const Memo = memo(Component)
Sari peste re-randare când props sunt egale
import { memo } from 'react'
Importă helper-ul memo
const value = useMemo(() => calc(a), [a])
Pune în cache o valoare calculată
const fn = useCallback(() => f(a), [a])
Pune în cache identitatea unei funcții
const Lazy = lazy(() => import('./Big.jsx'))
Code-split o componentă
import { lazy, Suspense } from 'react'
Importă lazy și Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Afișează o rezervă în timpul încărcării
startTransition(() => setQuery(q))
Marchează actualizările de state non-urgente
const slow = useDeferredValue(query)
Amână UI-ul derivat costisitor
React Compiler auto-memoizes
Adesea elimină memoizarea manuală
Diverse și metadate
10<Suspense fallback={<Loading />}>
Limită pentru conținut asincron
class ErrorBoundary extends Component {}
Prinde erori de randare (clasă legacy)
<title>My Page</title>
Ridică titlul documentului dintr-o componentă
<meta name="description" content="..." />
Randează meta tag-uri în head
<link rel="stylesheet" href="..." />
Ridică un link de foaie de stil
<Comp key={id} />
Schimbă cheia pentru a remonta o componentă
React.lazy(() => import('./Page.jsx'))
Importă lazy o componentă de rută
createPortal(node, container)
Randează într-un alt nod DOM
{/* a comment */}
Scrie un comentariu în interiorul JSX
cleanup return in useEffect
Eliberează întotdeauna abonamentele/timerele
Nicio intrare nu corespunde cu „:q”.
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.