{"id":9989,"date":"2022-03-31T17:10:57","date_gmt":"2022-03-31T15:10:57","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-81-react-18\/"},"modified":"2024-03-25T16:24:12","modified_gmt":"2024-03-25T15:24:12","slug":"frontend-thursday-vol-81-react-18","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/","title":{"rendered":"Frontend Thursday vol. 81 – React 18"},"content":{"rendered":"\n

Wreszcie si\u0119 doczekali\u015bmy! Po prawie roku od pojawienia si\u0119 wersji alpha i po 5 miesi\u0105cach od wydania pierwszej bety React 18 oficjalnie zosta\u0142 opublikowany. W odr\u00f3\u017cnieniu od poprzedniej wersji Reacta, kt\u00f3ra z punktu widzenia API nie wprowadza\u0142a znacz\u0105cych nowo\u015bci, wersja ta wr\u0119cz p\u0119ka w szwach od nowych funkcjonalno\u015bci.<\/p>\n\n\n\n

W tym momencie warto r\u00f3wnie\u017c zwr\u00f3ci\u0107 uwag\u0119, \u017ce zesp\u00f3\u0142 odpowiedzialny za Reacta nie zdecydowa\u0142 si\u0119 wskoczy\u0107 w tak popularne dzisiaj Release Trainy. React 17 ukaza\u0142 si\u0119 20 pa\u017adziernika 2020, czyli 17 miesi\u0119cy temu. Dla por\u00f3wnania w tym samym czasie ukaza\u0142y si\u0119 a\u017c 3 wersje Angulara, a najnowsza w momencie premiery React 17 wersja frameworka od Google nie jest ju\u017c wspierana. Patrz\u0105c na nowo\u015bci jakie wesz\u0142y do React 18 troch\u0119 \u017ca\u0142uj\u0119, \u017ce Angular nie pracuje w podobny spos\u00f3b.<\/p>\n\n\n\n

Dzisiejsze wydanie naszego przegl\u0105du mo\u017cecie potraktowa\u0107 jako wydanie specjalne, bo w pe\u0142ni po\u015bwi\u0119cone b\u0119dzie ono React 18. Przygotujcie sobie jakie\u015b dobre przek\u0105ski, z\u0142apcie co\u015b do picia i zapraszamy na wsp\u00f3ln\u0105 podr\u00f3\u017c przez nowo\u015bci z frameworka od Mety.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Opcjonalny tryb wsp\u00f3\u0142bie\u017cny (Concurrent Mode)<\/h2>\n\n\n\n

Tryb wsp\u00f3\u0142bie\u017cny (Concurrent Mode) sta\u0142 si\u0119 swego rodzaju memem w spo\u0142eczno\u015bci Reacta. Prace nad t\u0105 funkcjonalno\u015bci\u0105 trwa\u0142y tak d\u0142ugo, \u017ce osobi\u015bcie zacz\u0105\u0142em w\u0105tpi\u0107, czy kiedykolwiek trafi ona na produkcj\u0119. React 18 postanowi\u0142 pozytywnie mnie zaskoczy\u0107 i wprowadzi\u0142 opcjonalny tryb wsp\u00f3\u0142bie\u017cny. B\u0119dzie on uruchamiany w momencie skorzystania z jednego z wsp\u00f3\u0142bie\u017cnych API, zadzia\u0142a tylko na wybranej cz\u0119\u015bci pod-drzewa komponent\u00f3w i zadzia\u0142a tylko je\u015bli root renderowania zostanie stworzony przy u\u017cyciu nowego API.<\/p>\n\n\n\n

Je\u015bli nigdy nie s\u0142yszeli\u015bcie o trybie wsp\u00f3\u0142bie\u017cnym w React to pewnie drapiecie si\u0119 teraz w g\u0142ow\u0119 pr\u00f3buj\u0105c po\u0142\u0105czy\u0107 wsp\u00f3\u0142bie\u017cno\u015b\u0107 z jednow\u0105tkowym JavaScriptem. Jak si\u0119 okazuje wsp\u00f3\u0142bie\u017cno\u015b\u0107 polega tutaj na mo\u017cliwo\u015bci kolejkowania render\u00f3w, nadawaniu im priorytet\u00f3w oraz dodaniu mo\u017cliwo\u015bci przerwania renderu w trakcie.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n
\n

Komentarz<\/p>\nW tym momencie rozr\u00f3\u017cni\u0107 nale\u017cy renderowanie jakie wykonuje przegl\u0105darka, oraz renderowanie wykonywane przez Reacta. Renderowanie wykonywane przez przegl\u0105dark\u0119 by\u0142o i pozostaje w pe\u0142ni synchroniczne i nieprzerywalne z poziomu kodu JavaScript. Renderowanie w kontek\u015bcie Reacta oznacza natomiast aktualizowanie drzewa (lub pod-drzewa) komponent\u00f3w, budowanie element\u00f3w HTML i w ostatnim kroku \u0142\u0105czenia stworzonych element\u00f3w z drzewem DOM.<\/cite><\/blockquote>\n\n\n\n

Sztandarowym przyk\u0142adem, kiedy skorzystamy na trybie wsp\u00f3\u0142bie\u017cnym, s\u0105 interakcje z polem tekstowym s\u0142u\u017c\u0105cym do wyszukiwania element\u00f3w w d\u0142ugiej li\u015bcie. Kiedy u\u017cytkownik naciska klawisz na klawiaturze, nawet najmniejsze op\u00f3\u017anienie w aktualizacji pola tekstowego daje mu poczucie, \u017ce co\u015b jest nie tak. Natomiast je\u015bli chodzi o wyniki wyszukiwania, to drobne op\u00f3\u017anienie jest wr\u0119cz naturalne. W takiej sytuacji jasno wida\u0107, \u017ce do czynienia mamy tu z priorytetowym i niepriorytetowym renderem. Ponadto je\u015bli u\u017cytkownik jest w stanie pisa\u0107 szybciej ni\u017c React renderuje komponenty, to renderowanie po\u015brednich stan\u00f3w wyszukiwania jest niepo\u017c\u0105dane. W tym przypadku do gry wchodzi anulowanie renderowania, kt\u00f3re w momencie pojawienia si\u0119 nowszej wersji komponentu przerwie poprzedni render.<\/p>\n\n\n\n

Cz\u0119\u015b\u0107 z was prawdopodobnie zwr\u00f3ci uwag\u0119 na fakt, \u017ce podobny efekt mo\u017cna by\u0142o do tej pory osi\u0105gn\u0105\u0107 odpowiednio wykorzystuj\u0105c funkcj\u0119 debounce. R\u00f3\u017cnica pomi\u0119dzy stosowanymi obecnie technikami i trybem wsp\u00f3\u0142bie\u017cnym polega na tym, \u017ce obecnie renderowanie odbywa si\u0119 synchronicznie i w jego trakcie u\u017cytkownik nie jest w stanie interaktowa\u0107 ze stron\u0105. W trybie wsp\u00f3\u0142bie\u017cnym render o ni\u017cszym priorytecie zostanie przerwany w momencie, kiedy w kolejce pojawi si\u0119 render o wy\u017cszym priorytecie. Dzi\u0119ki przerwaniu mniej priorytetowego renderu strona powinna sprawia\u0107 wra\u017cenie du\u017co bardziej responsywnej.<\/p>\n\n\n\n

Oczywi\u015bcie na przyk\u0142adzie z inputem mo\u017cliwo\u015bci wykorzystania trybu wsp\u00f3\u0142bie\u017cnego si\u0119 nie ko\u0144cz\u0105. Dzi\u0119ki jego zastosowaniu w przysz\u0142o\u015bci mo\u017cliwe b\u0119dzie na przyk\u0142ad renderowanie poza ekranem, dzi\u0119ki kt\u00f3remu cachowa\u0107 b\u0119dzie mo\u017cna ju\u017c odwiedzone strony lub zawczasu renderowa\u0107 strony, kt\u00f3re najprawdopodobniej u\u017cytkownik odwiedzi w dalszej kolejno\u015bci. Dzi\u0119ki zastosowaniu priorytet\u00f3w takie akcji nie b\u0119d\u0105 wp\u0142ywa\u0107 na responsywno\u015b\u0107 interfejsu, bo b\u0119d\u0105 po prostu odbywa\u0107 si\u0119 z ni\u017cszym priorytetem.<\/p>\n\n\n\n

Wystarczy ju\u017c teorii – przejd\u017amy do mi\u0119ska, czyli nowego API. Nisko priorytetowe aktualizacje opakowane musz\u0105 zosta\u0107 w metod\u0119 startTransition, do kt\u00f3rej dosta\u0107 mo\u017cemy si\u0119 poprzez hook useTransition().<\/p>\n\n\n\n

\/\/ You can play with this code here: https:\/\/stackblitz.com\/edit\/react-anefuq?file=src\/App.js\n\nexport default function App() {\n  const [isPending, startTransition] = useTransition();\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    startTransition(() => {\n      setCount((c) => c + 1);\n    });\n  }\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={count} \/>,\n    [count]\n  );\n\n  return (\n    <>\n      {\/*Immediately after clicking the button *\/}\n      {\/*div changes opacity until low priority render finishes*\/}\n      <div style={{ opacity: isPending ? 0.8 : 1 }}>\n        {\/*Component below will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n\n\n\n
Do API trafi\u0142 r\u00f3wnie\u017c hook useDeferredValue. Je\u015bli hook ten wywo\u0142any zostanie w priorytetowym renderze to zwr\u00f3ci warto\u015b\u0107 z poprzedniego renderu. W ten spos\u00f3b referencja zmiennej nie zmieni si\u0119, co pozwoli nam unikn\u0105\u0107 nadmiernego renderowania.  Kiedy priorytetowe rendery zostan\u0105 wykonane, zakolejkowany zostanie niskopriorytetowy render w kt\u00f3rym hook zwr\u00f3ci now\u0105 warto\u015b\u0107 i wyrenderowany zostanie poprawny komponent. Pozwoli on wi\u0119c w znacz\u0105cy spos\u00f3b upro\u015bci\u0107 powy\u017cszy przyk\u0142ad. <\/p>\n\n\n\n
\/\/ You can play with this code here: https:\/\/stackblitz.com\/edit\/react-t6myxk?file=src\/App.js\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    setCount((c) => c + 1);\n  }\n\n  const deferredCount = useDeferredValue(count);\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={deferredCount} \/>,\n    [deferredCount]\n  );\n\n  return (\n    <>\n      <div>\n        {\/*This component will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Stara\u0142em si\u0119 jak mog\u0142em, \u017ceby w przejrzysty spos\u00f3b wyt\u0142umaczy\u0107 Wam jak dzia\u0142a wsp\u00f3\u0142bie\u017cne renderowanie w React. Niestety jest to temat skomplikowany, a tw\u00f3rcy niezbyt ch\u0119tnie dziel\u0105 si\u0119 szczeg\u00f3\u0142ami na temat jego detali implementacyjnych, dlatego wszystkich maj\u0105cych troch\u0119 wi\u0119cej czasu zach\u0119cam do wnikni\u0119cia w odno\u015bniki jakie znajdziemy w notatce towarzysz\u0105cej wydaniu i spr\u00f3bowania jak to rozgry\u017a\u0107 samemu.<\/p>\n\n\n\n
Automatic batching<\/h2>\n\n\n\n
Do tej pory React w wi\u0119kszo\u015bci przypadk\u00f3w by\u0142 w stanie zoptymalizowa\u0107 ilo\u015b\u0107 render\u00f3w przez ich grupowanie. Haczyk polega\u0142 na tym, \u017ce React by\u0142 w stanie grupowa\u0107 tylko aktualizacje stanu, kt\u00f3re mia\u0142y miejsce w tzw. React Event Handlers. Je\u015bli aktualizacje stanu mia\u0142y miejsce poza tym kontekstem (a mia\u0142o to miejsce na przyk\u0142ad wewn\u0105trz setTimeout), to React renderowa\u0142 drzewo komponent\u00f3w tyle razu, ile aktualizowany by\u0142 stan komponent\u00f3w. Od Reacta 18 wszystkie rendery bez wyj\u0105tk\u00f3w b\u0119d\u0105 grupowane.<\/p>\n\n\n\n
\/\/ Before: only React events were batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will render twice, once for each state update (no batching)\n}, 1000);\n\n\/\/ After: updates inside of timeouts, promises,\n\/\/ native event handlers or any other event are batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will only re-render once at the end (that's batching!)\n}, 1000);<\/code><\/pre>\n\n\n\n
Nowe zastosowania Suspense i Suspense na serwerze<\/h2>\n\n\n\n
Suspense do tej pory pe\u0142ni\u0142 w React tylko jedn\u0105 funkcj\u0119: w po\u0142\u0105czeniu z React.lazy umo\u017cliwia\u0142 wy\u015bwietlanie zapasowego komponentu do czasu, a\u017c kod docelowego komponentu zostanie pobrany. Od teraz Suspense w pe\u0142ni wykorzystywa\u0142 b\u0119dzie tryb wsp\u00f3\u0142bie\u017cny, co oznacza, \u017ce b\u0119dzi on wy\u015bwietla\u0142 zapasowy komponent za ka\u017cdym razem, kiedy jego dzieci b\u0119d\u0105 renderowane. W po\u0142\u0105czeniu z startTransition, ma to umo\u017cliwi\u0107 zaawansowan\u0105 obs\u0142ug\u0119 asynchronicznych akcji, takich jak na przyk\u0142ad pobieranie danych z serwera.<\/p>\n\n\n\n
const [isPending, startTransition] = useTransition();\n\nfunction handleClick() {\n  startTransition(() => {\n    setTab('comments');\n  });\n}\n\n<Suspense fallback={<Spinner \/>}>\n  <div style={{ opacity: isPending ? 0.8 : 1 }}>\n    {tab === 'photos' ? <Photos \/> : <Comments \/>}\n  <\/div>\n<\/Suspense><\/code><\/pre>\n\n\n\n
Nowy React wnosi do Suspens r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 wykorzystania po stronie serwera. Dzi\u0119ki nowym funkcjom renderToPipeableStream i renderToReadableStream, op\u00f3\u017aniona zawarto\u015b\u0107 Suspens b\u0119dzie streamowana do klienta i b\u0119dzie podlega\u0142a osobnemu procesowi hydration (do\u0142adowania skrypt\u00f3w do czystego HTML\u2019a).<\/p>\n\n\n\n
Nowy hook useId()<\/h2>\n\n\n\n
Je\u015bli kiedykolwiek byli\u015bcie zmuszeni pisa\u0107 aplikacj\u0119, kt\u00f3ra wspiera\u0142a renderowanie po stronie serwera, to prawdopodobnie zetkn\u0119li\u015bcie si\u0119 z problemem generowania losowych zmiennych. W skr\u00f3cie, standardowa metoda Math.random(), zwr\u00f3ci dwie r\u00f3\u017cne warto\u015bci po stronie serwera i po stronie klienta. To natomiast oznacza k\u0142opoty, je\u015bli wygenerowany w ten spos\u00f3b id chcieli\u015bmy przypisa\u0107 do elementu w DOM.<\/p>\n\n\n\n
Nowy React dodaje hook useId(), kt\u00f3ry generowa\u0142 b\u0119dzie losowe id, sp\u00f3jne po stronie serwera i klienta. Do tej pory podobne rozwi\u0105zania oferowa\u0142y zewn\u0119trzne biblioteki, ale ze wzgl\u0119du na wspomniane w poprzednim podrozdziale nowe API do strumieniowania, funkcja taka musia\u0142a pojawi\u0107 si\u0119 r\u00f3wnie\u017c w bibliotece standardowej.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Server Components wci\u0105\u017c s\u0105 nie stabilne<\/h2>\n\n\n\n
Od pierwszego przedstawienia React Server Components przez Dana Abramova min\u0119\u0142o ju\u017c sporo czasu. Do dzi\u015b pami\u0119tam jak tu\u017c przed wigili\u0105 2020 Dan postanowi\u0142 wcieli\u0107 si\u0119 w Miko\u0142aja i po raz pierwszy zaprezentowa\u0142 publicznie t\u0105 innowacyjn\u0105 koncepcj\u0119. React Server Component pozawlaj\u0105 renderowa\u0107 cz\u0119\u015b\u0107 komponent\u00f3w po stronie klienta i cz\u0119\u015b\u0107 po stronie serwera. Takie podej\u015bcie ma minimalizowa\u0107  ilo\u015b\u0107 kodu wysy\u0142anego do klienta (biblioteki importowane przez komponenty renderowane na serwerze nie s\u0105 wysy\u0142ane do klienta) i dawa\u0107 dost\u0119p do typowo serwerowych interfejs\u00f3w z poziomu Reacta (bazy danych, system plik\u00f3w). Oczywi\u015bcie koncepcja ma te\u017c swoje ograniczenia: komponenty renderowane na serwerze nie mog\u0105 przechowywa\u0107 stanu i obs\u0142ugiwa\u0107 interaktywnych akcji.<\/p>\n\n\n\n
Niestety React 18 to jeszcze nie moment na uznanie React Server Components za stabilne. Co ciekawe w notatce dotycz\u0105cej releasu znajdziemy wzmiank\u0119, \u017ce na ich stabilizacj\u0119 nie b\u0119dziemy musieli czeka\u0107 do wydania React 19 i najprawdopodobniej nast\u0105pi to w jednym z wyda\u0144 minor.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html<\/a>
https:\/\/reactjs.org\/docs\/hooks-reference.html#usetransition<\/a>
https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0213-suspense-in-react-18.md<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Miniony tydzie\u0144 zdecydowanie zdominowa\u0142 release React 18, kt\u00f3ry przyni\u00f3s\u0142 ogrom nowych funkcjonalno\u015bci. Dlatego tego tygodniowa edycja naszego przegl\u0105du w ca\u0142o\u015bci po\u015bwi\u0119cona b\u0119dzie w\u0142a\u015bnie bibliotece od Facebooka (ekhem ekhem… Mety)<\/p>\n","protected":false},"author":12,"featured_media":8012,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-3.png","feature_image_visible":false,"estimated_reading_time":"8","feature_image_blog":false},"yoast_head":"\nFrontend Thursday vol. 81 - React 18 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 81 - React 18 - Vived\" \/>\n<meta property=\"og:description\" content=\"Miniony tydzie\u0144 zdecydowanie zdominowa\u0142 release React 18, kt\u00f3ry przyni\u00f3s\u0142 ogrom nowych funkcjonalno\u015bci. Dlatego tego tygodniowa edycja naszego przegl\u0105du w ca\u0142o\u015bci po\u015bwi\u0119cona b\u0119dzie w\u0142a\u015bnie bibliotece od Facebooka (ekhem ekhem... Mety)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-31T15:10:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-25T15:24:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-3.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 81 – React 18\",\"datePublished\":\"2022-03-31T15:10:57+00:00\",\"dateModified\":\"2024-03-25T15:24:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\"},\"wordCount\":1452,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\",\"name\":\"Frontend Thursday vol. 81 - React 18 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif\",\"datePublished\":\"2022-03-31T15:10:57+00:00\",\"dateModified\":\"2024-03-25T15:24:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif\",\"width\":480,\"height\":262},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 81 – React 18\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 81 - React 18 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 81 - React 18 - Vived","og_description":"Miniony tydzie\u0144 zdecydowanie zdominowa\u0142 release React 18, kt\u00f3ry przyni\u00f3s\u0142 ogrom nowych funkcjonalno\u015bci. Dlatego tego tygodniowa edycja naszego przegl\u0105du w ca\u0142o\u015bci po\u015bwi\u0119cona b\u0119dzie w\u0142a\u015bnie bibliotece od Facebooka (ekhem ekhem... Mety)","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/","og_site_name":"Vived","article_published_time":"2022-03-31T15:10:57+00:00","article_modified_time":"2024-03-25T15:24:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-3.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-3.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 81 – React 18","datePublished":"2022-03-31T15:10:57+00:00","dateModified":"2024-03-25T15:24:12+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/"},"wordCount":1452,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/","name":"Frontend Thursday vol. 81 - React 18 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif","datePublished":"2022-03-31T15:10:57+00:00","dateModified":"2024-03-25T15:24:12+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-2.gif","width":480,"height":262},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-81-react-18\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 81 – React 18"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wreszcie si\u0119 doczekali\u015bmy! Po prawie roku od pojawienia si\u0119 wersji alpha i po 5 miesi\u0105cach od wydania pierwszej bety React 18 oficjalnie zosta\u0142 opublikowany. W odr\u00f3\u017cnieniu od poprzedniej wersji Reacta, kt\u00f3ra z punktu widzenia API nie wprowadza\u0142a znacz\u0105cych nowo\u015bci, wersja ta wr\u0119cz p\u0119ka w szwach od nowych funkcjonalno\u015bci.<\/p>\n","innerContent":["\n<p>Wreszcie si\u0119 doczekali\u015bmy! Po prawie roku od pojawienia si\u0119 wersji alpha i po 5 miesi\u0105cach od wydania pierwszej bety React 18 oficjalnie zosta\u0142 opublikowany. W odr\u00f3\u017cnieniu od poprzedniej wersji Reacta, kt\u00f3ra z punktu widzenia API nie wprowadza\u0142a znacz\u0105cych nowo\u015bci, wersja ta wr\u0119cz p\u0119ka w szwach od nowych funkcjonalno\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W tym momencie warto r\u00f3wnie\u017c zwr\u00f3ci\u0107 uwag\u0119, \u017ce zesp\u00f3\u0142 odpowiedzialny za Reacta nie zdecydowa\u0142 si\u0119 wskoczy\u0107 w tak popularne dzisiaj Release Trainy. React 17 ukaza\u0142 si\u0119 20 pa\u017adziernika 2020, czyli 17 miesi\u0119cy temu. Dla por\u00f3wnania w tym samym czasie ukaza\u0142y si\u0119 a\u017c 3 wersje Angulara, a najnowsza w momencie premiery React 17 wersja frameworka od Google nie jest ju\u017c wspierana. Patrz\u0105c na nowo\u015bci jakie wesz\u0142y do React 18 troch\u0119 \u017ca\u0142uj\u0119, \u017ce Angular nie pracuje w podobny spos\u00f3b.<\/p>\n","innerContent":["\n<p>W tym momencie warto r\u00f3wnie\u017c zwr\u00f3ci\u0107 uwag\u0119, \u017ce zesp\u00f3\u0142 odpowiedzialny za Reacta nie zdecydowa\u0142 si\u0119 wskoczy\u0107 w tak popularne dzisiaj Release Trainy. React 17 ukaza\u0142 si\u0119 20 pa\u017adziernika 2020, czyli 17 miesi\u0119cy temu. Dla por\u00f3wnania w tym samym czasie ukaza\u0142y si\u0119 a\u017c 3 wersje Angulara, a najnowsza w momencie premiery React 17 wersja frameworka od Google nie jest ju\u017c wspierana. Patrz\u0105c na nowo\u015bci jakie wesz\u0142y do React 18 troch\u0119 \u017ca\u0142uj\u0119, \u017ce Angular nie pracuje w podobny spos\u00f3b.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Dzisiejsze wydanie naszego przegl\u0105du mo\u017cecie potraktowa\u0107 jako wydanie specjalne, bo w pe\u0142ni po\u015bwi\u0119cone b\u0119dzie ono React 18. Przygotujcie sobie jakie\u015b dobre przek\u0105ski, z\u0142apcie co\u015b do picia i zapraszamy na wsp\u00f3ln\u0105 podr\u00f3\u017c przez nowo\u015bci z frameworka od Mety.<\/p>\n","innerContent":["\n<p>Dzisiejsze wydanie naszego przegl\u0105du mo\u017cecie potraktowa\u0107 jako wydanie specjalne, bo w pe\u0142ni po\u015bwi\u0119cone b\u0119dzie ono React 18. Przygotujcie sobie jakie\u015b dobre przek\u0105ski, z\u0142apcie co\u015b do picia i zapraszamy na wsp\u00f3ln\u0105 podr\u00f3\u017c przez nowo\u015bci z frameworka od Mety.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4120,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-3.gif\" alt=\"\" class=\"wp-image-4120\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/giphy-3.gif\" alt=\"\" class=\"wp-image-4120\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Opcjonalny tryb wsp\u00f3\u0142bie\u017cny (Concurrent Mode)<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Opcjonalny tryb wsp\u00f3\u0142bie\u017cny (Concurrent Mode)<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Tryb wsp\u00f3\u0142bie\u017cny (Concurrent Mode) sta\u0142 si\u0119 swego rodzaju memem w spo\u0142eczno\u015bci Reacta. Prace nad t\u0105 funkcjonalno\u015bci\u0105 trwa\u0142y tak d\u0142ugo, \u017ce osobi\u015bcie zacz\u0105\u0142em w\u0105tpi\u0107, czy kiedykolwiek trafi ona na produkcj\u0119. React 18 postanowi\u0142 pozytywnie mnie zaskoczy\u0107 i wprowadzi\u0142 opcjonalny tryb wsp\u00f3\u0142bie\u017cny. B\u0119dzie on uruchamiany w momencie skorzystania z jednego z wsp\u00f3\u0142bie\u017cnych API, zadzia\u0142a tylko na wybranej cz\u0119\u015bci pod-drzewa komponent\u00f3w i zadzia\u0142a tylko je\u015bli root renderowania zostanie stworzony przy u\u017cyciu nowego API.<\/p>\n","innerContent":["\n<p>Tryb wsp\u00f3\u0142bie\u017cny (Concurrent Mode) sta\u0142 si\u0119 swego rodzaju memem w spo\u0142eczno\u015bci Reacta. Prace nad t\u0105 funkcjonalno\u015bci\u0105 trwa\u0142y tak d\u0142ugo, \u017ce osobi\u015bcie zacz\u0105\u0142em w\u0105tpi\u0107, czy kiedykolwiek trafi ona na produkcj\u0119. React 18 postanowi\u0142 pozytywnie mnie zaskoczy\u0107 i wprowadzi\u0142 opcjonalny tryb wsp\u00f3\u0142bie\u017cny. B\u0119dzie on uruchamiany w momencie skorzystania z jednego z wsp\u00f3\u0142bie\u017cnych API, zadzia\u0142a tylko na wybranej cz\u0119\u015bci pod-drzewa komponent\u00f3w i zadzia\u0142a tylko je\u015bli root renderowania zostanie stworzony przy u\u017cyciu nowego API.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli nigdy nie s\u0142yszeli\u015bcie o trybie wsp\u00f3\u0142bie\u017cnym w React to pewnie drapiecie si\u0119 teraz w g\u0142ow\u0119 pr\u00f3buj\u0105c po\u0142\u0105czy\u0107 wsp\u00f3\u0142bie\u017cno\u015b\u0107 z jednow\u0105tkowym JavaScriptem. Jak si\u0119 okazuje wsp\u00f3\u0142bie\u017cno\u015b\u0107 polega tutaj na mo\u017cliwo\u015bci kolejkowania render\u00f3w, nadawaniu im priorytet\u00f3w oraz dodaniu mo\u017cliwo\u015bci przerwania renderu w trakcie.<\/p>\n","innerContent":["\n<p>Je\u015bli nigdy nie s\u0142yszeli\u015bcie o trybie wsp\u00f3\u0142bie\u017cnym w React to pewnie drapiecie si\u0119 teraz w g\u0142ow\u0119 pr\u00f3buj\u0105c po\u0142\u0105czy\u0107 wsp\u00f3\u0142bie\u017cno\u015b\u0107 z jednow\u0105tkowym JavaScriptem. Jak si\u0119 okazuje wsp\u00f3\u0142bie\u017cno\u015b\u0107 polega tutaj na mo\u017cliwo\u015bci kolejkowania render\u00f3w, nadawaniu im priorytet\u00f3w oraz dodaniu mo\u017cliwo\u015bci przerwania renderu w trakcie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4121,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/6auoc5.jpeg\" alt=\"\" class=\"wp-image-4121\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/6auoc5.jpeg\" alt=\"\" class=\"wp-image-4121\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/quote","attrs":[],"innerBlocks":[{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Komentarz<\/p>\n","innerContent":["\n<p>Komentarz<\/p>\n"]}],"innerHTML":"\n<blockquote class=\"wp-block-quote\"><cite>W tym momencie rozr\u00f3\u017cni\u0107 nale\u017cy renderowanie jakie wykonuje przegl\u0105darka, oraz renderowanie wykonywane przez Reacta. Renderowanie wykonywane przez przegl\u0105dark\u0119 by\u0142o i pozostaje w pe\u0142ni synchroniczne i nieprzerywalne z poziomu kodu JavaScript. Renderowanie w kontek\u015bcie Reacta oznacza natomiast aktualizowanie drzewa (lub pod-drzewa) komponent\u00f3w, budowanie element\u00f3w HTML i w ostatnim kroku \u0142\u0105czenia stworzonych element\u00f3w z drzewem DOM.<\/cite><\/blockquote>\n","innerContent":["\n<blockquote class=\"wp-block-quote\">",null,"<cite>W tym momencie rozr\u00f3\u017cni\u0107 nale\u017cy renderowanie jakie wykonuje przegl\u0105darka, oraz renderowanie wykonywane przez Reacta. Renderowanie wykonywane przez przegl\u0105dark\u0119 by\u0142o i pozostaje w pe\u0142ni synchroniczne i nieprzerywalne z poziomu kodu JavaScript. Renderowanie w kontek\u015bcie Reacta oznacza natomiast aktualizowanie drzewa (lub pod-drzewa) komponent\u00f3w, budowanie element\u00f3w HTML i w ostatnim kroku \u0142\u0105czenia stworzonych element\u00f3w z drzewem DOM.<\/cite><\/blockquote>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Sztandarowym przyk\u0142adem, kiedy skorzystamy na trybie wsp\u00f3\u0142bie\u017cnym, s\u0105 interakcje z polem tekstowym s\u0142u\u017c\u0105cym do wyszukiwania element\u00f3w w d\u0142ugiej li\u015bcie. Kiedy u\u017cytkownik naciska klawisz na klawiaturze, nawet najmniejsze op\u00f3\u017anienie w aktualizacji pola tekstowego daje mu poczucie, \u017ce co\u015b jest nie tak. Natomiast je\u015bli chodzi o wyniki wyszukiwania, to drobne op\u00f3\u017anienie jest wr\u0119cz naturalne. W takiej sytuacji jasno wida\u0107, \u017ce do czynienia mamy tu z priorytetowym i niepriorytetowym renderem. Ponadto je\u015bli u\u017cytkownik jest w stanie pisa\u0107 szybciej ni\u017c React renderuje komponenty, to renderowanie po\u015brednich stan\u00f3w wyszukiwania jest niepo\u017c\u0105dane. W tym przypadku do gry wchodzi anulowanie renderowania, kt\u00f3re w momencie pojawienia si\u0119 nowszej wersji komponentu przerwie poprzedni render.<\/p>\n","innerContent":["\n<p>Sztandarowym przyk\u0142adem, kiedy skorzystamy na trybie wsp\u00f3\u0142bie\u017cnym, s\u0105 interakcje z polem tekstowym s\u0142u\u017c\u0105cym do wyszukiwania element\u00f3w w d\u0142ugiej li\u015bcie. Kiedy u\u017cytkownik naciska klawisz na klawiaturze, nawet najmniejsze op\u00f3\u017anienie w aktualizacji pola tekstowego daje mu poczucie, \u017ce co\u015b jest nie tak. Natomiast je\u015bli chodzi o wyniki wyszukiwania, to drobne op\u00f3\u017anienie jest wr\u0119cz naturalne. W takiej sytuacji jasno wida\u0107, \u017ce do czynienia mamy tu z priorytetowym i niepriorytetowym renderem. Ponadto je\u015bli u\u017cytkownik jest w stanie pisa\u0107 szybciej ni\u017c React renderuje komponenty, to renderowanie po\u015brednich stan\u00f3w wyszukiwania jest niepo\u017c\u0105dane. W tym przypadku do gry wchodzi anulowanie renderowania, kt\u00f3re w momencie pojawienia si\u0119 nowszej wersji komponentu przerwie poprzedni render.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Cz\u0119\u015b\u0107 z was prawdopodobnie zwr\u00f3ci uwag\u0119 na fakt, \u017ce podobny efekt mo\u017cna by\u0142o do tej pory osi\u0105gn\u0105\u0107 odpowiednio wykorzystuj\u0105c funkcj\u0119 debounce. R\u00f3\u017cnica pomi\u0119dzy stosowanymi obecnie technikami i trybem wsp\u00f3\u0142bie\u017cnym polega na tym, \u017ce obecnie renderowanie odbywa si\u0119 synchronicznie i w jego trakcie u\u017cytkownik nie jest w stanie interaktowa\u0107 ze stron\u0105. W trybie wsp\u00f3\u0142bie\u017cnym render o ni\u017cszym priorytecie zostanie przerwany w momencie, kiedy w kolejce pojawi si\u0119 render o wy\u017cszym priorytecie. Dzi\u0119ki przerwaniu mniej priorytetowego renderu strona powinna sprawia\u0107 wra\u017cenie du\u017co bardziej responsywnej.<\/p>\n","innerContent":["\n<p>Cz\u0119\u015b\u0107 z was prawdopodobnie zwr\u00f3ci uwag\u0119 na fakt, \u017ce podobny efekt mo\u017cna by\u0142o do tej pory osi\u0105gn\u0105\u0107 odpowiednio wykorzystuj\u0105c funkcj\u0119 debounce. R\u00f3\u017cnica pomi\u0119dzy stosowanymi obecnie technikami i trybem wsp\u00f3\u0142bie\u017cnym polega na tym, \u017ce obecnie renderowanie odbywa si\u0119 synchronicznie i w jego trakcie u\u017cytkownik nie jest w stanie interaktowa\u0107 ze stron\u0105. W trybie wsp\u00f3\u0142bie\u017cnym render o ni\u017cszym priorytecie zostanie przerwany w momencie, kiedy w kolejce pojawi si\u0119 render o wy\u017cszym priorytecie. Dzi\u0119ki przerwaniu mniej priorytetowego renderu strona powinna sprawia\u0107 wra\u017cenie du\u017co bardziej responsywnej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Oczywi\u015bcie na przyk\u0142adzie z inputem mo\u017cliwo\u015bci wykorzystania trybu wsp\u00f3\u0142bie\u017cnego si\u0119 nie ko\u0144cz\u0105. Dzi\u0119ki jego zastosowaniu w przysz\u0142o\u015bci mo\u017cliwe b\u0119dzie na przyk\u0142ad renderowanie poza ekranem, dzi\u0119ki kt\u00f3remu cachowa\u0107 b\u0119dzie mo\u017cna ju\u017c odwiedzone strony lub zawczasu renderowa\u0107 strony, kt\u00f3re najprawdopodobniej u\u017cytkownik odwiedzi w dalszej kolejno\u015bci. Dzi\u0119ki zastosowaniu priorytet\u00f3w takie akcji nie b\u0119d\u0105 wp\u0142ywa\u0107 na responsywno\u015b\u0107 interfejsu, bo b\u0119d\u0105 po prostu odbywa\u0107 si\u0119 z ni\u017cszym priorytetem.<\/p>\n","innerContent":["\n<p>Oczywi\u015bcie na przyk\u0142adzie z inputem mo\u017cliwo\u015bci wykorzystania trybu wsp\u00f3\u0142bie\u017cnego si\u0119 nie ko\u0144cz\u0105. Dzi\u0119ki jego zastosowaniu w przysz\u0142o\u015bci mo\u017cliwe b\u0119dzie na przyk\u0142ad renderowanie poza ekranem, dzi\u0119ki kt\u00f3remu cachowa\u0107 b\u0119dzie mo\u017cna ju\u017c odwiedzone strony lub zawczasu renderowa\u0107 strony, kt\u00f3re najprawdopodobniej u\u017cytkownik odwiedzi w dalszej kolejno\u015bci. Dzi\u0119ki zastosowaniu priorytet\u00f3w takie akcji nie b\u0119d\u0105 wp\u0142ywa\u0107 na responsywno\u015b\u0107 interfejsu, bo b\u0119d\u0105 po prostu odbywa\u0107 si\u0119 z ni\u017cszym priorytetem.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wystarczy ju\u017c teorii - przejd\u017amy do mi\u0119ska, czyli nowego API. Nisko priorytetowe aktualizacje opakowane musz\u0105 zosta\u0107 w metod\u0119 startTransition, do kt\u00f3rej dosta\u0107 mo\u017cemy si\u0119 poprzez hook useTransition().<\/p>\n","innerContent":["\n<p>Wystarczy ju\u017c teorii - przejd\u017amy do mi\u0119ska, czyli nowego API. Nisko priorytetowe aktualizacje opakowane musz\u0105 zosta\u0107 w metod\u0119 startTransition, do kt\u00f3rej dosta\u0107 mo\u017cemy si\u0119 poprzez hook useTransition().<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ You can play with this code here: https:\/\/stackblitz.com\/edit\/react-anefuq?file=src\/App.js\n\nexport default function App() {\n  const [isPending, startTransition] = useTransition();\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    startTransition(() => {\n      setCount((c) => c + 1);\n    });\n  }\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={count} \/>,\n    [count]\n  );\n\n  return (\n    <>\n      {\/*Immediately after clicking the button *\/}\n      {\/*div changes opacity until low priority render finishes*\/}\n      <div style={{ opacity: isPending ? 0.8 : 1 }}>\n        {\/*Component below will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ You can play with this code here: https:\/\/stackblitz.com\/edit\/react-anefuq?file=src\/App.js\n\nexport default function App() {\n  const [isPending, startTransition] = useTransition();\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    startTransition(() => {\n      setCount((c) => c + 1);\n    });\n  }\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={count} \/>,\n    [count]\n  );\n\n  return (\n    <>\n      {\/*Immediately after clicking the button *\/}\n      {\/*div changes opacity until low priority render finishes*\/}\n      <div style={{ opacity: isPending ? 0.8 : 1 }}>\n        {\/*Component below will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do API trafi\u0142 r\u00f3wnie\u017c hook useDeferredValue. Je\u015bli hook ten wywo\u0142any zostanie w priorytetowym renderze to zwr\u00f3ci warto\u015b\u0107 z poprzedniego renderu. W ten spos\u00f3b referencja zmiennej nie zmieni si\u0119, co pozwoli nam unikn\u0105\u0107 nadmiernego renderowania.  Kiedy priorytetowe rendery zostan\u0105 wykonane, zakolejkowany zostanie niskopriorytetowy render w kt\u00f3rym hook zwr\u00f3ci now\u0105 warto\u015b\u0107 i wyrenderowany zostanie poprawny komponent. Pozwoli on wi\u0119c w znacz\u0105cy spos\u00f3b upro\u015bci\u0107 powy\u017cszy przyk\u0142ad. <\/p>\n","innerContent":["\n<p>Do API trafi\u0142 r\u00f3wnie\u017c hook useDeferredValue. Je\u015bli hook ten wywo\u0142any zostanie w priorytetowym renderze to zwr\u00f3ci warto\u015b\u0107 z poprzedniego renderu. W ten spos\u00f3b referencja zmiennej nie zmieni si\u0119, co pozwoli nam unikn\u0105\u0107 nadmiernego renderowania.  Kiedy priorytetowe rendery zostan\u0105 wykonane, zakolejkowany zostanie niskopriorytetowy render w kt\u00f3rym hook zwr\u00f3ci now\u0105 warto\u015b\u0107 i wyrenderowany zostanie poprawny komponent. Pozwoli on wi\u0119c w znacz\u0105cy spos\u00f3b upro\u015bci\u0107 powy\u017cszy przyk\u0142ad. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":[],"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ You can play with this code here: https:\/\/stackblitz.com\/edit\/react-t6myxk?file=src\/App.js\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    setCount((c) => c + 1);\n  }\n\n  const deferredCount = useDeferredValue(count);\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={deferredCount} \/>,\n    [deferredCount]\n  );\n\n  return (\n    <>\n      <div>\n        {\/*This component will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/\/ You can play with this code here: https:\/\/stackblitz.com\/edit\/react-t6myxk?file=src\/App.js\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  function handleClick() {\n    setCount((c) => c + 1);\n  }\n\n  const deferredCount = useDeferredValue(count);\n\n  const advancedCounter = useMemo(\n    () => <AdvancedCounter count={deferredCount} \/>,\n    [deferredCount]\n  );\n\n  return (\n    <>\n      <div>\n        {\/*This component will update only after all priority renders finish.*\/}\n        {\/*If user spams increase button only last render will be visible to user.*\/}\n        {advancedCounter}\n        <button onClick={handleClick}>Increase counter<\/button>\n      <\/div>\n    <\/>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4122,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/6auqav.jpeg\" alt=\"\" class=\"wp-image-4122\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/6auqav.jpeg\" alt=\"\" class=\"wp-image-4122\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Stara\u0142em si\u0119 jak mog\u0142em, \u017ceby w przejrzysty spos\u00f3b wyt\u0142umaczy\u0107 Wam jak dzia\u0142a wsp\u00f3\u0142bie\u017cne renderowanie w React. Niestety jest to temat skomplikowany, a tw\u00f3rcy niezbyt ch\u0119tnie dziel\u0105 si\u0119 szczeg\u00f3\u0142ami na temat jego detali implementacyjnych, dlatego wszystkich maj\u0105cych troch\u0119 wi\u0119cej czasu zach\u0119cam do wnikni\u0119cia w odno\u015bniki jakie znajdziemy w notatce towarzysz\u0105cej wydaniu i spr\u00f3bowania jak to rozgry\u017a\u0107 samemu.<\/p>\n","innerContent":["\n<p>Stara\u0142em si\u0119 jak mog\u0142em, \u017ceby w przejrzysty spos\u00f3b wyt\u0142umaczy\u0107 Wam jak dzia\u0142a wsp\u00f3\u0142bie\u017cne renderowanie w React. Niestety jest to temat skomplikowany, a tw\u00f3rcy niezbyt ch\u0119tnie dziel\u0105 si\u0119 szczeg\u00f3\u0142ami na temat jego detali implementacyjnych, dlatego wszystkich maj\u0105cych troch\u0119 wi\u0119cej czasu zach\u0119cam do wnikni\u0119cia w odno\u015bniki jakie znajdziemy w notatce towarzysz\u0105cej wydaniu i spr\u00f3bowania jak to rozgry\u017a\u0107 samemu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Automatic batching<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Automatic batching<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do tej pory React w wi\u0119kszo\u015bci przypadk\u00f3w by\u0142 w stanie zoptymalizowa\u0107 ilo\u015b\u0107 render\u00f3w przez ich grupowanie. Haczyk polega\u0142 na tym, \u017ce React by\u0142 w stanie grupowa\u0107 tylko aktualizacje stanu, kt\u00f3re mia\u0142y miejsce w tzw. React Event Handlers. Je\u015bli aktualizacje stanu mia\u0142y miejsce poza tym kontekstem (a mia\u0142o to miejsce na przyk\u0142ad wewn\u0105trz setTimeout), to React renderowa\u0142 drzewo komponent\u00f3w tyle razu, ile aktualizowany by\u0142 stan komponent\u00f3w. Od Reacta 18 wszystkie rendery bez wyj\u0105tk\u00f3w b\u0119d\u0105 grupowane.<\/p>\n","innerContent":["\n<p>Do tej pory React w wi\u0119kszo\u015bci przypadk\u00f3w by\u0142 w stanie zoptymalizowa\u0107 ilo\u015b\u0107 render\u00f3w przez ich grupowanie. Haczyk polega\u0142 na tym, \u017ce React by\u0142 w stanie grupowa\u0107 tylko aktualizacje stanu, kt\u00f3re mia\u0142y miejsce w tzw. React Event Handlers. Je\u015bli aktualizacje stanu mia\u0142y miejsce poza tym kontekstem (a mia\u0142o to miejsce na przyk\u0142ad wewn\u0105trz setTimeout), to React renderowa\u0142 drzewo komponent\u00f3w tyle razu, ile aktualizowany by\u0142 stan komponent\u00f3w. Od Reacta 18 wszystkie rendery bez wyj\u0105tk\u00f3w b\u0119d\u0105 grupowane.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ Before: only React events were batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will render twice, once for each state update (no batching)\n}, 1000);\n\n\/\/ After: updates inside of timeouts, promises,\n\/\/ native event handlers or any other event are batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will only re-render once at the end (that's batching!)\n}, 1000);<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/ Before: only React events were batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will render twice, once for each state update (no batching)\n}, 1000);\n\n\/\/ After: updates inside of timeouts, promises,\n\/\/ native event handlers or any other event are batched.\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \/\/ React will only re-render once at the end (that's batching!)\n}, 1000);<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Nowe zastosowania Suspense i Suspense na serwerze<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Nowe zastosowania Suspense i Suspense na serwerze<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Suspense do tej pory pe\u0142ni\u0142 w React tylko jedn\u0105 funkcj\u0119: w po\u0142\u0105czeniu z React.lazy umo\u017cliwia\u0142 wy\u015bwietlanie zapasowego komponentu do czasu, a\u017c kod docelowego komponentu zostanie pobrany. Od teraz Suspense w pe\u0142ni wykorzystywa\u0142 b\u0119dzie tryb wsp\u00f3\u0142bie\u017cny, co oznacza, \u017ce b\u0119dzi on wy\u015bwietla\u0142 zapasowy komponent za ka\u017cdym razem, kiedy jego dzieci b\u0119d\u0105 renderowane. W po\u0142\u0105czeniu z startTransition, ma to umo\u017cliwi\u0107 zaawansowan\u0105 obs\u0142ug\u0119 asynchronicznych akcji, takich jak na przyk\u0142ad pobieranie danych z serwera.<\/p>\n","innerContent":["\n<p>Suspense do tej pory pe\u0142ni\u0142 w React tylko jedn\u0105 funkcj\u0119: w po\u0142\u0105czeniu z React.lazy umo\u017cliwia\u0142 wy\u015bwietlanie zapasowego komponentu do czasu, a\u017c kod docelowego komponentu zostanie pobrany. Od teraz Suspense w pe\u0142ni wykorzystywa\u0142 b\u0119dzie tryb wsp\u00f3\u0142bie\u017cny, co oznacza, \u017ce b\u0119dzi on wy\u015bwietla\u0142 zapasowy komponent za ka\u017cdym razem, kiedy jego dzieci b\u0119d\u0105 renderowane. W po\u0142\u0105czeniu z startTransition, ma to umo\u017cliwi\u0107 zaawansowan\u0105 obs\u0142ug\u0119 asynchronicznych akcji, takich jak na przyk\u0142ad pobieranie danych z serwera.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const [isPending, startTransition] = useTransition();\n\nfunction handleClick() {\n  startTransition(() => {\n    setTab('comments');\n  });\n}\n\n<Suspense fallback={<Spinner \/>}>\n  <div style={{ opacity: isPending ? 0.8 : 1 }}>\n    {tab === 'photos' ? <Photos \/> : <Comments \/>}\n  <\/div>\n<\/Suspense><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const [isPending, startTransition] = useTransition();\n\nfunction handleClick() {\n  startTransition(() => {\n    setTab('comments');\n  });\n}\n\n<Suspense fallback={<Spinner \/>}>\n  <div style={{ opacity: isPending ? 0.8 : 1 }}>\n    {tab === 'photos' ? <Photos \/> : <Comments \/>}\n  <\/div>\n<\/Suspense><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowy React wnosi do Suspens r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 wykorzystania po stronie serwera. Dzi\u0119ki nowym funkcjom renderToPipeableStream i renderToReadableStream, op\u00f3\u017aniona zawarto\u015b\u0107 Suspens b\u0119dzie streamowana do klienta i b\u0119dzie podlega\u0142a osobnemu procesowi hydration (do\u0142adowania skrypt\u00f3w do czystego HTML\u2019a).<\/p>\n","innerContent":["\n<p>Nowy React wnosi do Suspens r\u00f3wnie\u017c mo\u017cliwo\u015b\u0107 wykorzystania po stronie serwera. Dzi\u0119ki nowym funkcjom renderToPipeableStream i renderToReadableStream, op\u00f3\u017aniona zawarto\u015b\u0107 Suspens b\u0119dzie streamowana do klienta i b\u0119dzie podlega\u0142a osobnemu procesowi hydration (do\u0142adowania skrypt\u00f3w do czystego HTML\u2019a).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Nowy hook useId()<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Nowy hook useId()<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli kiedykolwiek byli\u015bcie zmuszeni pisa\u0107 aplikacj\u0119, kt\u00f3ra wspiera\u0142a renderowanie po stronie serwera, to prawdopodobnie zetkn\u0119li\u015bcie si\u0119 z problemem generowania losowych zmiennych. W skr\u00f3cie, standardowa metoda Math.random(), zwr\u00f3ci dwie r\u00f3\u017cne warto\u015bci po stronie serwera i po stronie klienta. To natomiast oznacza k\u0142opoty, je\u015bli wygenerowany w ten spos\u00f3b id chcieli\u015bmy przypisa\u0107 do elementu w DOM.<\/p>\n","innerContent":["\n<p>Je\u015bli kiedykolwiek byli\u015bcie zmuszeni pisa\u0107 aplikacj\u0119, kt\u00f3ra wspiera\u0142a renderowanie po stronie serwera, to prawdopodobnie zetkn\u0119li\u015bcie si\u0119 z problemem generowania losowych zmiennych. W skr\u00f3cie, standardowa metoda Math.random(), zwr\u00f3ci dwie r\u00f3\u017cne warto\u015bci po stronie serwera i po stronie klienta. To natomiast oznacza k\u0142opoty, je\u015bli wygenerowany w ten spos\u00f3b id chcieli\u015bmy przypisa\u0107 do elementu w DOM.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowy React dodaje hook useId(), kt\u00f3ry generowa\u0142 b\u0119dzie losowe id, sp\u00f3jne po stronie serwera i klienta. Do tej pory podobne rozwi\u0105zania oferowa\u0142y zewn\u0119trzne biblioteki, ale ze wzgl\u0119du na wspomniane w poprzednim podrozdziale nowe API do strumieniowania, funkcja taka musia\u0142a pojawi\u0107 si\u0119 r\u00f3wnie\u017c w bibliotece standardowej.<\/p>\n","innerContent":["\n<p>Nowy React dodaje hook useId(), kt\u00f3ry generowa\u0142 b\u0119dzie losowe id, sp\u00f3jne po stronie serwera i klienta. Do tej pory podobne rozwi\u0105zania oferowa\u0142y zewn\u0119trzne biblioteki, ale ze wzgl\u0119du na wspomniane w poprzednim podrozdziale nowe API do strumieniowania, funkcja taka musia\u0142a pojawi\u0107 si\u0119 r\u00f3wnie\u017c w bibliotece standardowej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4124,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/6auotm.jpeg\" alt=\"\" class=\"wp-image-4124\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/6auotm.jpeg\" alt=\"\" class=\"wp-image-4124\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Server Components wci\u0105\u017c s\u0105 nie stabilne<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Server Components wci\u0105\u017c s\u0105 nie stabilne<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Od pierwszego przedstawienia React Server Components przez Dana Abramova min\u0119\u0142o ju\u017c sporo czasu. Do dzi\u015b pami\u0119tam jak tu\u017c przed wigili\u0105 2020 Dan postanowi\u0142 wcieli\u0107 si\u0119 w Miko\u0142aja i po raz pierwszy zaprezentowa\u0142 publicznie t\u0105 innowacyjn\u0105 koncepcj\u0119. React Server Component pozawlaj\u0105 renderowa\u0107 cz\u0119\u015b\u0107 komponent\u00f3w po stronie klienta i cz\u0119\u015b\u0107 po stronie serwera. Takie podej\u015bcie ma minimalizowa\u0107  ilo\u015b\u0107 kodu wysy\u0142anego do klienta (biblioteki importowane przez komponenty renderowane na serwerze nie s\u0105 wysy\u0142ane do klienta) i dawa\u0107 dost\u0119p do typowo serwerowych interfejs\u00f3w z poziomu Reacta (bazy danych, system plik\u00f3w). Oczywi\u015bcie koncepcja ma te\u017c swoje ograniczenia: komponenty renderowane na serwerze nie mog\u0105 przechowywa\u0107 stanu i obs\u0142ugiwa\u0107 interaktywnych akcji.<\/p>\n","innerContent":["\n<p>Od pierwszego przedstawienia React Server Components przez Dana Abramova min\u0119\u0142o ju\u017c sporo czasu. Do dzi\u015b pami\u0119tam jak tu\u017c przed wigili\u0105 2020 Dan postanowi\u0142 wcieli\u0107 si\u0119 w Miko\u0142aja i po raz pierwszy zaprezentowa\u0142 publicznie t\u0105 innowacyjn\u0105 koncepcj\u0119. React Server Component pozawlaj\u0105 renderowa\u0107 cz\u0119\u015b\u0107 komponent\u00f3w po stronie klienta i cz\u0119\u015b\u0107 po stronie serwera. Takie podej\u015bcie ma minimalizowa\u0107  ilo\u015b\u0107 kodu wysy\u0142anego do klienta (biblioteki importowane przez komponenty renderowane na serwerze nie s\u0105 wysy\u0142ane do klienta) i dawa\u0107 dost\u0119p do typowo serwerowych interfejs\u00f3w z poziomu Reacta (bazy danych, system plik\u00f3w). Oczywi\u015bcie koncepcja ma te\u017c swoje ograniczenia: komponenty renderowane na serwerze nie mog\u0105 przechowywa\u0107 stanu i obs\u0142ugiwa\u0107 interaktywnych akcji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Niestety React 18 to jeszcze nie moment na uznanie React Server Components za stabilne. Co ciekawe w notatce dotycz\u0105cej releasu znajdziemy wzmiank\u0119, \u017ce na ich stabilizacj\u0119 nie b\u0119dziemy musieli czeka\u0107 do wydania React 19 i najprawdopodobniej nast\u0105pi to w jednym z wyda\u0144 minor.<\/p>\n","innerContent":["\n<p>Niestety React 18 to jeszcze nie moment na uznanie React Server Components za stabilne. Co ciekawe w notatce dotycz\u0105cej releasu znajdziemy wzmiank\u0119, \u017ce na ich stabilizacj\u0119 nie b\u0119dziemy musieli czeka\u0107 do wydania React 19 i najprawdopodobniej nast\u0105pi to w jednym z wyda\u0144 minor.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html\">https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html<\/a><br><a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usetransition\">https:\/\/reactjs.org\/docs\/hooks-reference.html#usetransition<\/a><br><a href=\"https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0213-suspense-in-react-18.md\">https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0213-suspense-in-react-18.md<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html\">https:\/\/reactjs.org\/blog\/2022\/03\/29\/react-v18.html<\/a><br><a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usetransition\">https:\/\/reactjs.org\/docs\/hooks-reference.html#usetransition<\/a><br><a href=\"https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0213-suspense-in-react-18.md\">https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0213-suspense-in-react-18.md<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=9989"}],"version-history":[{"count":2,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9989\/revisions"}],"predecessor-version":[{"id":17929,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9989\/revisions\/17929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/8012"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}