React state és renderelés
React state érthetően: snapshot, setState, batching, immutability és miért nem változik meg azonnal a jelenlegi renderben a state változó.
Röviden
A React state egy komponenspéldányhoz kapcsolódó adat, amelynek frissítése új renderelést kér. Egy adott renderben a state érték snapshotként viselkedik: a `setState` nem írja át visszamenőleg az éppen futó render lokális értékét.
Mit jelent a react state és renderelés?
A React state egy komponenspéldányhoz kapcsolódó adat, amelynek frissítése új renderelést kér. Egy adott renderben a state érték snapshotként viselkedik: a `setState` nem írja át visszamenőleg az éppen futó render lokális értékét.
State → render
State snapshot
0
A render ehhez az állapot-pillanatképhez tartozik.
Event
Hogyan működik a gyakorlatban?
Több frissítést React batch-elhet. Ha az új érték a korábbitól függ, updater függvény (`setCount(c => c + 1)`) egyértelműbb és több egymás utáni frissítésnél helyes viselkedést ad. Objektumstate-et ne mutálj helyben.
- State legyen minimális: ami propsból/egyéb state-ből levezethető, gyakran nem kell külön state-be.
- State emelése akkor kell, ha több gyermek ugyanazt az adatot osztja.
- Updater function a korábbi queued state alapján számol.
- Mutable nested objektum referenciája rejtett update hibát okozhat.
Gyakorlati fejlesztői szemlélet
Mielőtt state-et adsz, kérdezd meg: tartós üzleti adat, URL állapot, szerveradat, form draft vagy tisztán levezethető érték? Nem mindegyiknek a `useState` a legjobb helye.
Gyakori hibák és félreértések
- Minden derived értéket useState-ben duplikálni.
- State object propertyt közvetlenül módosítani, majd ugyanazt a referenciát visszaadni.
- A setState után rögtön a lokális változóból az új értéket várni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy