SLAVA, ZAHADA ROZRESENA!!!
CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.
https://stackoverflow.com/questions/40819992/react-parent-component-re-renders-all-children-even-those-that-havent-changed
React: Parent component re-renders all children, even those that haven't changed on state change
If a parent component is updated, does React always update all the direct children within that component?
No. React will only re-render a component if shouldComponentUpdate() returns true. By default, that method always returns true to avoid any subtle bugs for newcomers (and as William B pointed out, the DOM won't actually update unless something changed, lowering the impact).
Takze Filipe Jirsaku, oprav si svoji znalosti. Omlouvat se mi, pokud neches, nemusis, uz jsem ti vynadal dost.
Regards,
Registrovany123, Backend Software Engineer
Gratulujem k vyrieseniu zahady, par tipov do buducna:
- JS pohlad na svet sa lisi od vacsiny backendov s ktorymi som robil ako fullstack tym, ze neexistuje jedno spravne riesenie, neda sa povedat, ci je lepsi React alebo Vue, neda sa povedat ci je lepsie shouldComponentUpdate alebo useMemo, neda sa povedat, ci je lepsi redux, alebo mobx, su to ine sposoby riesenia toho isteho problemu a v JS svete je podstatne ze kazdy si vie vybrat to, ktore mu viac vyhovuje.
- Dobre kniznice a frameworky maju dobru dokumentaciu, plati to aj o Reacte a Vue. Ja som tiez zacinal na backende a jQuery a z toho presiel na React, ale ako jedna z prvych veci bolo, ze som si precital komplet vsetky dokumentacne clanky okrem API reference, ostatne to robim pri kazdej kniznici/frameworku s ktorym zacinam robit, a o shouldComponentUpdate som vedel hned zo zaciatku.
- Dalsi koncept nielen z JS sveta je, ze "Premature optimization is the root of all evil". Problem re-rendrovania 5000 itemov nemusi mat az taky zmysel riesit, lebo to nie je az tak pomale. A ked sa dostanes na miliony tak bude pomaly uz prvy render a budes to cele chciet vyriesit nejak inak. Tak si pozries v kvalitnej dokumentacii React-u kapitolu "Optimizing Performance" tuna
https://reactjs.org/docs/optimizing-performance.html a tam si najdes info o technike zvanej "windowing".
- Okrem toho, ze JS svet ponuka viacero moznosti riesenia pripadov ktore su si ekvivalentne sa este aj velmi rychlo a casto vynaraju nove, vacsinou s cielom ulahcit bud zrozumitelnost alebo zmensit potrebny balast naokolo. Takto vznikli aj React Hooks, ktore vdaka tomu ze su pisane ako obycajne funkcie tak je pri nich intuitivnejsie, ze sa volaju vzdy, pokial tomu nejakym sposobom (useMemo) nezabranis. Pre to sa vela JS developerov casto chyta noviniek aj ked sa neskor mozno ukaze ze ta novinka nie je uplne vhodna na jeho use-case. Ale aj tak ak sa chces ako JS dev uchytit odporucam sledovat nove trendy a changelogy, neraz sa mi stalo, ze som narazil na problem, o ktoreho rieseni som rok predtym cital v popise novej verzie Reactu.
tl;dr: svet JavaScriptu je zradny, a ak sa v nom chces vediet dobre orientovat, je potrebne vela citat s porozumenim. Namiesto hadania sa s Jirsakom si si v tomto pripade mohol precitat dokumentaciu Reactu, najst v nej 3 rozne riesenia a vybrat si, ktore ti najviac vyhovuje.