X'inhu l-mudell ta' stat atomiku (Jotai/Recoil)?

Question

Accepted Answer

Il-**mudell ta' stat atomiku** (Jotai, Recoil) ibni l-istat globali minn ħafna unità żgħar, indipendenti msejħa **atoms**, ikkomposti minn isfel għal fuq — aktar milli negozju wieħed kbir top-down (Redux) jew kuntest monolitiku. Il-komponenti jissoskrivu għal atoms individuali u jevalwaw mill-ġdid biss meta *dawn* jinbidlu. ## Atoms — l-iżgħar unità ta' stat ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a primitive atom — one piece of state const nameAtom = atom("Ann"); // another, independent ``` Kull atom huwa biċċa stat li tefgħa biss. Inti tħallaq kemm irridu, kull wieħed indirizz bil-quddiem. ## Atoms derivati — kompożizzjoni ```jsx // a derived atom computes from other atoms; recomputes when its dependencies change const doubleAtom = atom((get) => get(countAtom) * 2); const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`); // writable derived atom const upperNameAtom = atom( (get) => get(nameAtom).toUpperCase(), (get, set, newVal) => set(nameAtom, newVal.toLowerCase()), ); ``` Atoms komponenta f'grafu ta' dipendenza — atoms derivati awtomatikament ġdidu meta l-atoms li jaqradu jinbidlu, bħal spreadsheet. ## Użu ta' atoms — jħoss bħal useState, iżda globali ```jsx function Counter() { const [count, setCount] = useAtom(countAtom); // global, but useState-like API return ; } function Display() { const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes } ``` ## Atomiku (isfel għal fuq) vs negozju (fuq għal isfel) ```text Redux (top-down): one big state tree; you carve slices/selectors OUT of it Atomic (bottom-up): start with tiny atoms; compose them UP into derived state Granularity: each atom is independently subscribable → naturally fine-grained re-renders (a component using countAtom ignores nameAtom changes) ``` ## Benefiċċji u trade-offs ```text ✓ Fine-grained re-renders by default (subscribe to exactly the atoms you use) ✓ No selector boilerplate; derived state is just another atom ✓ Solves Context's "re-render everything" problem ✓ Great for state that's naturally decomposed into many independent pieces ✗ Many atoms can be harder to organize/trace than one centralized store ✗ Less rigid structure than Redux (a pro or con depending on the team) ``` ## Għaliex hu importanti Il-mudell atomiku huwa approċċ distint u dejjem aktar popolari għall-istat globali li jbiddel l-istruttura top-down ta' Redux: minflok titqa' negozju kbir, inti tikkomponi atoms żgħar minn isfel għal fuq. L-granularità tagħha mibnija tagħti re-renders effiċenti u mmirat mingħajr selezzjonaturi — direttament taqbil ħamsa tal-prestazzjoni tal-Kuntest. L-fehim ta' atoms (u atoms derivati) ikkompletar il-għarfien tiegħek tal-ispazju tad-disinn tal-ġestjoni tal-istat, flimkien mal-mudelli ta' negozju wieħed (Redux/Zustand) u reattiv (MobX/Signals), għin ilek tagħżel il-paradigma li hija l-aqwa adatta għall-forma tal-istat ta' app.