tillbaka till startsidan

42. React 18

Lyssna på Spotify lyssna! Lyssna på iTunes

Therése är förkyld, Anton har fyllt 30 och med det i ryggen snackar vi om nyheter i React 18 som nyligen gått in i sin betaperiod. Allt från att den här releasen är mer spännande än den tråkiga React 17-releasen, concurrent mode vs concurrent features, automatisk batching, lite nya hooks och mycket annat kul.

Om du gillar podden blir vi väldigt glada för en liten recension i iTunes eller en prenumeration på Spotify. Följ oss och säg hej på @asdfpodden på Instagram eller Twitter (Anton, Therése) <3

Länkar

Avsnittets skämt:

Varför känns det så tråkigt att spara persondata som JSON?
Jag gillar inte att objektifiera människor.
Skrapa här!!
Transkribering
Transkriberingen är gjord av nån "AI-grej". Du kan förbättra den genom att klicka precis här :)
00:00:00
Varför känns det så tråkigt att spara persondata som Jason?
00:00:04
Jag vet inte.
00:00:06
Jag gillar inte att objektifiera människor.
00:00:09
Det var kul. Det gillar jag. Bra. Jag skrattar.
00:00:15
Nu är vi igång. Nytt avsnitt av ASD. Det känns som om det var jättelänge sen jag spelade in.
00:00:19
Men det var det nog inte. Det var nog två veckor sedan.
00:00:22
Ja, det känns som en evighet i förkylningsår för min del sedan.
00:00:28
Ja, exakt. Du är förkyld. Jag har hunnit kliva in i 30-talet, eller 30-årsåldern i alla fall.
00:00:36
Välkommen.
00:00:37
Tack, tack. Det känns väldigt bra. Känner mig gammal?
00:00:40
Ja, det där får man inte alltid säga. För då säger någon "Du som är så ung!" och så blir man så här ageist.
00:00:48
Det är tråkigt.
00:00:51
Ja, men jag sa ju bara att jag känner mig gammal.
00:00:54
Jag vet, men det är för att jag alltid säger att jag känner mig gammal, men min kropp är typ 80.
00:00:58
[Skratt]
00:00:59
Jag är allowed.
00:01:01
Det lovar ju inte gott för framtiden.
00:01:03
Men, vad tänkte vi prata om idag?
00:01:07
Jo, vi tänkte prata lite grann om React 18, tror jag.
00:01:11
Kanske prata om lite grejer som kommer efter React 18 också.
00:01:13
Men vi kan väl börja där i alla fall.
00:01:16
För det släpptes ju beta för kanske tre veckor sedan, tror jag.
00:01:20
Om jag inte minns helt fel.
00:01:22
Vilket då skulle betyda att det är ungefär ett par månader bort så det släpps efter kanske januari, februari om jag får kill i sig lite grann.
00:01:32
Det ska väl komma ut någon release candidate och grejer innan det är klart.
00:01:35
Men efter det, om det inte dyker upp något väldigt mycket fel så kommer React 18 komma.
00:01:41
Och det känns ändå, jag är taggad. Det känns kul.
00:01:45
Ja, det gör det ju. För att 17 var ju hela den här, det har hänt massor under ytan för att förbereda för nästa major men det har inte hänt så mycket för användaren.
00:01:58
Exakt, för den var ju svidtråkig egentligen. Det var exakt som du säger, man sa "vi preppar så att man kan uppdatera till 18" eller "preppa till 17" så ligger man på 17 så ska det vara en lätt väg att gå till 18.
00:02:13
Men det är kul för jag tänkte inte alls att det var någonting som skulle påverka mig.
00:02:18
Men sen upptäckte jag att jag hade massa problem med att jag inte fick med mig eventvärdet in i mina setstate callbacks.
00:02:27
Men det läste de.
00:02:29
- Ah, i 2018 pratar vi om?
00:02:32
- Nej, i 2017.
00:02:34
Så i 2016 hade jag problem med det och sen kom jag på att de skulle fixa det i 2017.
00:02:39
Så det var faktiskt en liten ändring. Plus att man inte behöver importera React.
00:02:42
Ja, den var i och för sig trevlig. Även om min VS Code fortfarande inte har lärt sig det där.
00:02:49
Jag vet inte varför. Men den typ ger mig inte autocomplete på komponenter om jag inte har import React högst upp.
00:02:58
Först så föreslår den alltid "Vill du importera React?" och så måste jag klicka ja på den.
00:03:04
Och sen får jag förslag på "Den här komponenten är inte använd, vill du importera den också?"
00:03:07
Den ligger precis i filen här bredvid.
00:03:09
Det kan vara något som är fel-configurat i min VS Code.
00:03:15
- Jag har inte stött på det där. Min verkar snällare.
00:03:18
Eller så har jag bara inte byggt något.
00:03:20
[Skratt]
00:03:22
- Vi får väl säga att jag borde ta tag i att kolla det där.
00:03:26
Men det har aldrig blivit av. Det är inte ett så stort problem.
00:03:29
När den märker att det är en unjuiced import så tar den ju bort den också.
00:03:33
Den håller på lite där fram och tillbaka.
00:03:34
Lägg till React, ta bort React, lägg till React och så vidare.
00:03:37
Så den får extra jobba?
00:03:39
Exakt.
00:03:41
Men React 18 då
00:03:44
kommer med lite mer grejer tycker jag.
00:03:48
Det är lite saker som är ganska kul.
00:03:51
Lite saker som är så här, ja, det låter väl nice.
00:03:54
Men kanske inte tänkt på så mycket innan.
00:03:57
Men har du nåt så här som du är, fan det där låter skit nice.
00:04:02
Så här helt fruktansvärt för att jag läste igenom saker igår och det är så blankt i huvudet just nu så att du förstår inte. Jag kan inte frammana någonting.
00:04:11
Vi kan skylla på en förkylnings hjärna kanske.
00:04:15
Ja och fortfarande lite utbränt så att jag kommer leva på den vågen.
00:04:21
Det är ändå en våg du kan leva på. Så lite, det är kombinationen helt enkelt nu.
00:04:27
Jag har inte det men jag tänker att du har det.
00:04:33
Jo men jag har några grejer.
00:04:36
Det finns ju två saker som jag tycker verkar jävligt...
00:04:41
Den stora grejen som jag tycker är nice är att de har gått bort från det här med att
00:04:45
Concurrent mode inte finns riktigt längre.
00:04:48
Alltså att de har bytt från att det är ett mode till att det är Concurrent features typ.
00:04:52
För förut var ju Concurrent Mode, när det presenterades, jag vet inte hur länge sen det var, tre år sedan kanske
00:04:58
Har ju alltid varit att det är ett läge du sätter din app i
00:05:02
Så att du kan antingen köra typ Blocking som ska vara där man kör idag
00:05:05
Eller så ska det vara något mittemellanläge, eller så är det Concurrent Mode
00:05:09
Och att när du upptäcker 18 så får du tvungen att välja vilket läge du vill köra din app i
00:05:13
Och hela appen måste stödja det, vilket då inkluderar typ 3D-parts-libs och allting sånt
00:05:19
Men då har de gått bort från det nu till 2018 och sagt att vi har "concurrent features" istället.
00:05:27
Så när du använder en "concurrent feature" då optar du in den biten av trädet som du använder den på.
00:05:35
Vilket gör att man kan välja var man vill använda den och om man märker att det inte funkar på ett ställe så kan man skita i att använda det just där.
00:05:41
Just det. Jag kom på nu också vad jag tycker är nice.
00:05:46
Att de batchar fler state updates.
00:05:49
Ja, exakt. Det är ju faktiskt kul.
00:05:51
Jag tycker det är trevligt att de gör det, men jag har inte stött på det supermånga gånger.
00:05:56
Att jag har märkt varför min komponent renderar två gånger.
00:05:59
Mycket för att jag kanske inte bryr mig om hur många gånger min komponent renderar.
00:06:02
Men det är ju trevligt.
00:06:05
Jag kan ju störa mig väldigt mycket på extra renderingar.
00:06:10
Sedan är det också att jag har jobbat en del med performance.
00:06:17
Jag har inte alltid varit jättebra på det här med performance.
00:06:20
Så när man får lite bättre performance, bara out of the box, det tycker jag är väldigt skönt.
00:06:25
Problem blir lösta åt den.
00:06:28
Ja, det är väl därför man använder ramverk.
00:06:32
Det kan jag väl påstå.
00:06:34
Det är skitnice.
00:06:36
Och den skillnaden mot tidigare, nu tror jag om jag minns rätt, är väl att
00:06:41
tidigare har ju event handlers, om du har en onclick och skickar in en funktion i den
00:06:51
och så kör man två set states, så batchade vi den tidigare så att det blev en omrendering bara.
00:06:57
Men istället då om det var typ att du gjorde ett API-anrop och sen hade du ett promise som resolvade och i den resolven för det promise satte två states då fick du två renderingar för då visste React inte hur den skulle batcha det typ.
00:07:18
Nu ska den klara av att batcha alla sådana grejer tillsammans.
00:07:24
Exakt, så nu ska det inte spela någon roll om React inte vet vad som händer.
00:07:30
Om det är en clickhandler eller något utanför så ska den batcha.
00:07:34
Sen finns det en funktion, eller en hooker för att man ska kunna wrappa den om man vill ha specifikt en stateuppdatering.
00:07:42
Så det går alltid att komma runt den.
00:07:44
Ja, jag tror kanske att det är en funktion rakt upp och ner på React DOM, om jag inte minns fel, som heter typ "Flush" eller något i den stilen.
00:07:53
Ja, just det, för jag kommer ihåg också att det stod "Observera" att det är från React DOM och inte från React.
00:07:59
Ja, för tidigare fanns ju ett sätt att jobba runt det här problemet, som var typ "Unstable_batchedupdates" eller något sånt som också kom från React DOM om jag minns rätt.
00:08:09
Där man kunde liksom satt i din resolver för ditt promise i vårt exempel så kunde du liksom wrappa dina set states i den istället.
00:08:18
Och då batchade Reacten för att du satte den och gör det.
00:08:21
Men den är ju borta nu istället. Så nu blir det åt andra hållet att den batchar by default och sen får du opta ut från batchningen om du har någon anledning att göra det.
00:08:31
Jag vet inte till vart man skulle vilja göra det, men ja.
00:08:34
Jo men här sitter jag nu och så tycker jag att det är trevligt men jag bara, alltså om jag ändå ska sia om mig själv i framtiden så kommer det dyka upp ett tillfälle där man sitter såhär
00:08:43
Men varför sätter den båda staten samtidigt? Jag vill ju att den här ska sättas och sen ska den här sättas. Vad är det här om? Varför gör de såhär?
00:08:51
Och så måste jag komma ihåg, vilket jag inte kommer göra och hitta den här flashfunktionen och använda den. Jag kommer ju vara upprörd på det.
00:08:58
För att jag kommer ju inte ihåg saker, visligen.
00:09:01
- Uppenbarligen.
00:09:02
Men jag ser fram emot det.
00:09:06
- Det ska bli spännande. Vi kanske återkommer till en liten callback till avsnittet någon gång i framtiden.
00:09:14
När du berättar att du skriker över att React batchar saker.
00:09:18
- Ja, jag hoppas det.
00:09:22
Jo, och sen den andra grejen som jag tänkte på, det är väl två grejer egentligen, men är ju då två nya hooks.
00:09:30
Den ena heter Use Transition och den andra heter Use Deferred Value.
00:09:34
Just det, och båda sätter igång Concurrent Mode.
00:09:38
Ja, precis, båda är Concurrent Features.
00:09:42
Och det är jävligt svårt än så länge att förstå riktigt när man ska använda den ena och när man ska använda den andra.
00:09:50
Och ett litet sidospår här innan jag går in på de här huxen är att en annan grej som de har gjort nu inför React 18
00:09:58
i React Core-teamet är att de har bjudit in ganska mycket till diskussion kring de här featuresen
00:10:06
medan det har varit tidig alfa och så fort det kom där. Sen i somras någon gång tror jag
00:10:11
och haft ett repo på GitHub som heter React Working Group där de har bjudit in alla som har bidragit till React
00:10:18
har kunnat kommentera till det. Och så har de kört discussions-fliken på GitHub.
00:10:23
Och där har folk kunnat ställa frågor om saker och hur det funkar och fått förklaringar från core-teamet
00:10:29
eller andra som kan det. Och det tycker jag har varit sjukt nice. Särskilt för mig som är väldigt intresserad
00:10:35
av vart jag är på väg och vad som kommer att hända och hur folk tänker kring det.
00:10:39
Att bara kunna gå in där och titta lite grann. Och det finns vissa poster som är skitbra.
00:10:43
Det finns en som heter...
00:10:45
Jag ska se, jag tror till och med att jag har den öppen på en flik.
00:10:50
Den heter så mycket som "Glossary + Explain Like I'm 5".
00:10:55
Och då är det någon som heter Sylvia Vargas som har skrivit och gjort en tråd på det här React Working Group.
00:11:02
Varje inlägg under den här tråden är att hon ber folk förklara som att hon är fem år gammal olika termer.
00:11:13
Och vad det är för något. Så typ "concurrency" har en egen.
00:11:15
Där de försöker förklara vad concurrency är på ett så enkelt sätt som möjligt.
00:11:19
Och sen finns det typ, om jag skojar här så har vi "batching" och "automatic batching".
00:11:22
Vi har "hydration", "SSR".
00:11:26
Det finns mer "passive effects".
00:11:28
"Discrete events", "promise tick", "flush sync".
00:11:32
Vad var det du undrade om jag pratade om nyss?
00:11:33
Typ "code splitting", "debouncing".
00:11:36
Alltså det är skitmycket grejer som förklaras på extremt bra och pedagogiska sätt i kommentarerna bara.
00:11:42
Och mycket är Dan Abramov som går in och svarar, medan vissa andra går in på andra saker som de kan bättre.
00:11:49
Men vi länkar såklart den i beskrivningen också. Men jag kan verkligen rekommendera att gå in på den och kolla på den om man är lite nyfiken.
00:11:54
Och särskilt typ såhär "Vad fan är concurrency för något?"
00:11:56
Så finns det liksom en väldigt pedagogisk förklaring där.
00:11:59
[Therése] Jag blev bara såhär... Jag förstår ju begreppet. Och alla förstår vad det innebär.
00:12:05
Men jag är såhär "Vilken jävla brainig femåring alltså!"
00:12:08
- Ja, det ska erkännas. Jag kanske inte hade fattat det som en riktig femåring.
00:12:18
- Nej, men sånt där gillar jag verkligen. Det är så mycket antaganden om att alla fattar vad det här är.
00:12:24
Nej, för det är inte alltid lätt att komma in i det tekniska vokableret samt när det inte ens är native language, eller modersmål heter det på svenska.
00:12:34
Svenska och sådana saker. Så där är det alltid jätteuppskattat tycker jag.
00:12:39
Jag uppskattar det.
00:12:40
Ja, men verkligen. Samma här.
00:12:42
Och kan också nämna att, jag tror kanske vi nämnt det i en tidigare avsnitt, men de håller
00:12:47
också på skriver om hela React-dokumentationen från grunden upp.
00:12:51
Och man kan väl nästan räkna med att den förmodligen kommer liksom
00:12:56
sammanstråla lite grann med React 18 och innehålla saker om concurrency till exempel.
00:13:00
Där är det också mycket mer fokus på hur man ska tänka i React.
00:13:05
Till exempel finns det jättemycket om i ny dokumentationen.
00:13:08
Den ligger också uppe på beta.react.org.
00:13:11
Reactjs.org. Kommer aldrig ha vilken sida där.
00:13:14
Men den ligger också uppe där, så man kan gå in och titta och läsa den.
00:13:19
Den är inte helt färdig än, men också extremt mycket.
00:13:21
Och att den är "hooks first".
00:13:23
Så att de pratar inte om klasskomponenter längre.
00:13:26
Vilket de fortfarande gör i den nuvarande dokumentationen, vilket är ändå lite sjukt.
00:13:29
Gud vad jag inte visste det när jag pekade på den personen.
00:13:36
Fel av mig.
00:13:38
Men ja, Concurrency, jag tycker det är svårt.
00:13:45
Men jag tänker att du har lite bättre koll, så prata om de nya hookarna.
00:13:50
Jag kan väl nämna något om concurrency först också.
00:13:58
Jag tror att det är lite svårt att bara förklara "top of mind".
00:14:05
Men det handlar egentligen om att det är som concurrency.
00:14:09
Om man vet vad ordet betyder så handlar det om att man kan köra flera saker samtidigt.
00:14:12
Eller att saker kan överlappa.
00:14:14
Det det handlar om i React är att React blir smartare så att det kan hantera att om det kommer flera set states så kan de få lite olika prioritet.
00:14:33
I stort sett.
00:14:34
Och de här hooksen väger vi in lite i det här.
00:14:37
Men den kan avbryta rendering.
00:14:41
Alltså att den håller på att rendera något och så kommer det något som ska renderas igen.
00:14:44
Då kan den bara "ja men då avbryter jag den och sen så fortsätter jag att rendera"
00:14:46
"och sen om jag behöver börja omrendera så kan jag göra det."
00:14:48
Väldigt förenklad förklaring.
00:14:50
Jag skulle verkligen rekommendera att man går in och läser några artiklar eller den här förklaringen som vi pratade om nyss.
00:14:56
För att förstå vad det är.
00:14:58
Men i React 18 så kommer de här hooksen som vi pratade om.
00:15:02
Den ena heter Use Transition och den andra heter Use Deferred Value.
00:15:05
Och det är inte helt solklart hur de skiljer sig.
00:15:12
Det är ganska solklart rent tekniskt hur de funkar.
00:15:17
Men det är inte helt solklart vart man ska använda vilken.
00:15:21
För syftet är i stort sett samma sak.
00:15:25
Och de har liksom demat väldigt mycket i Start Transition eller Use Transition-hucken.
00:15:30
Det den gör är att du får tillbaka en funktion som kan kallas för start transition.
00:15:36
Och en boolean som är typ "is pending".
00:15:39
Vilket betyder då om den här transitionen är pågående.
00:15:44
Det man kan göra sen är att du kan wrappa dina set states i start transition.
00:15:50
För att säga till React att den här state-uppdateringen är inte akut.
00:15:58
Utan med den här statenplateringen så kan det bli så här "ja, vi sätter den när det hinner"
00:16:05
Och det gör ju att React kan anpassa sig. Så är det på en långsam dator så kommer kanske inte den där staten sättas på ett tag.
00:16:11
Men är det på en snabb dator så kanske det sätts direkt.
00:16:13
Och exemplet de har använt för att visa det här är typ någon open source app som de har använt.
00:16:21
Den renderar en typ av bubbelgraf med massa medicinsk information, typ om DNA tror jag det är.
00:16:28
Och sen finns det en slider man kan dra i för att filtrera den här.
00:16:32
By default då när du kör som React 17 idag, och drar i den här så sker det en set state på varje on change på den här sliden.
00:16:41
Och när den sätter statet så hänger sig i GUI-t.
00:16:47
Så både slidern hänger sig, det hoppar till i den här bubbelgrafen.
00:16:52
Och man märker verkligen att det känns som att datorn jobbar hårt när man drar i den så att säga.
00:16:57
Men sen så visar den då i det här demot att man kan wrappa den här set-staten bara med start transition.
00:17:05
Och helt plötsligt så är Slider-uppdateringen helt smooth.
00:17:12
Så att du kan dra i Slidern fram och tillbaka hur mycket du vill och den hänger sig aldrig.
00:17:15
Det som händer är att när React hinner köra en rendering av det värdet som du står på, då kommer den rendera om den här bubbelgrafen.
00:17:25
Men om inte annat så att Slidern kommer fortfarande vara smooth oavsett hur mycket det laggar i den här bubbelgrafen för att det tar tid att rendera den.
00:17:34
Och det är jäkligt coolt faktiskt. Det är så extremt lite förändring som sker men det får ett extremt hög påverkan för användarupplevelsen.
00:17:48
Det är ett extremt bra use case också.
00:17:52
För just den här med att man bara drar in slider ibland.
00:17:55
Lite okinnigensdrar i en slider för att se vad som händer.
00:17:59
Den är smooth fortfarande men att den per automatik väntar tills användaren har lugnat ner sig innan den ens uppdaterar allting.
00:18:07
Det är snyggt alltså.
00:18:09
Man ska också skilja på det här att det inte är en debounce till exempel.
00:18:16
För där är det typ att då spelar det ingen roll hur snabb dator du har, utan säg att man har sett en debounce på 250 millisekunder
00:18:23
Då kommer du alltid behöva vänta då minst 250 millisekunder från att du slutat dra slidern till att det uppdateras
00:18:31
Men i det här fallet så kommer den då anpassa sig så att kör du på en extremt långsam data, man kan ju liksom simulera det här i browsern
00:18:37
Då kommer det ta lite längre tid för att du släpper den, men är du på en snabb dator då kommer den liksom uppdatera
00:18:42
Eftersom med att du drar sliden behöver du inte släppa sliden för att den ska uppdateras utan den uppdateras för att den hinner göra det utan att GUI hänger sig.
00:18:50
- Ja, det här är ändå så stort. För det är liksom när man pratar så mycket om, vad ska man säga, ekonomisk skillnad i världen.
00:19:05
I världen, även när man pratar om IT och ojämlikheten, det handlar ju alltid om prestandan.
00:19:11
För att det är det som är den stora skillnaden.
00:19:13
Så att ta steg där vi i möjliga mån jämnar ut det här, det känns stort.
00:19:21
Verkligen. Nej, jag tycker det är väldigt spännande.
00:19:26
Sen kommer det här som gör mig förvirrad och väldigt många andra enligt internet.
00:19:31
När de har pratat om den här start-transition eller use-transition-hucken så har de sagt att här har vi visat hur man ska göra det
00:19:39
Men det är förmodligen inte här ni kommer att använda use-transition, utan den kommer att ligga på en högre nivå egentligen
00:19:45
Alltså typ på routernivå, när du byter mellan routes till exempel
00:19:51
Eller liknande, och på en lokal nivå eller vad man ska kalla det här i den här komponenten
00:19:55
Så ska man istället använda den här use-deferred-value
00:19:58
Och den har liksom aldrig demats egentligen.
00:20:02
Jag tänkte att jag skulle testa det här i samma demo som de körde det här med DNA-bubbelgrafen.
00:20:09
Men det visade sig att de som har gjort den har typ paywallat den datan som laddas in i den bubbelgrafen.
00:20:16
Undrar de det för att det här demopresset är populärt? Förmodligen.
00:20:19
Men så gick inte att testa.
00:20:22
Men som jag förstår det så ska den hooken, det den gör är att den tar bara in ett, liksom en parameter eller ett argument i när du anropar hooken
00:20:34
Och det ska vara det state värdet, så att i det här fallet då så är det typ da eller slider värdet som blir
00:20:41
Deferred, nej det blir såklart värdet på bubbelgrafen som den renderar
00:20:46
Så den stoppas in i just deferred hook och sen parenteras det och det här värdet som ska stoppas in
00:20:52
Och sen spottar den ut sig då ett annat värde som ska vara "deferred"
00:20:58
Det vill säga att det är ett värde som React vet att det här värdet är inte akut att det uppdateras
00:21:06
Och då ska det funka egentligen på exakt samma sätt som vi pratade om med start transition
00:21:12
Men det ska liksom bara vara en hook som du stoppar in ett värde i, får ut ett värde som kommer uppdateras när den hinner
00:21:18
Så att man som användare sätter det från olika håll?
00:21:23
Ja.
00:21:24
För att Transition prioriterar alltid det här?
00:21:27
Nej vänta.
00:21:28
Nej, båda gör exakt samma sak egentligen.
00:21:31
Start Transition är att du säger att det här inte är en akut stateuppdatering.
00:21:34
Men juste for the value.
00:21:36
Jag tror att en skillnad de pratade om var att start Transition så måste ju du ha access till där du sätter ditt state.
00:21:44
För det är ju "setState"-anropet. Du skickar in en funktion som sätter ditt state.
00:21:52
Då måste du ha tillgång till den funktionen som sätter ditt state.
00:21:55
Medan med "useTheFurredValue" behöver du bara ha tillgång till värdet.
00:21:58
Så den skulle kunna komma från en props till exempel.
00:22:01
Och sen skickar du in den i din hook för att du vet att om den har uppdaterats så kommer det ta väldigt lång tid.
00:22:05
Men då skickar den genom Use Deferred Value som spottar ur sig ett värde som React vet att det är inte akut att det renderas.
00:22:14
Just det, just det. Så det är därför man skulle använda Use Transition på en mer överskådlig nivå.
00:22:21
Medans Deferred Value är till för att använda i barn och grejer som kanske är Prop Drillade Nersaker.
00:22:27
Man ska ju inte Prop Drilla. Jag vet, jag vet.
00:22:29
Prop Drill är ganska nice. Jag gillar Prop Drill.
00:22:31
Har inte opinionen svängt kring det?
00:22:34
Jag vet inte. Jag känner att jag är alldeles för "out". Jag har fortfarande inte lärt mig att använda just memo, just callback och just state-korrekten.
00:22:42
Nej, men det är sånt som kommer. När man springer in i ett problem och man måste göra det så lär man sig.
00:22:48
Jo, precis. Men det är ju att jag har gjort det och fortfarande inte "nailed" det.
00:22:54
- Absolut. Det känns väl ändå som att det "make a sense" liksom.
00:22:58
Att du behöver inte ha tillgång till att kontrollera staten. Du behöver bara hantera värdet.
00:23:03
- Mm. - Ja, jag fattar det. Jag fattar det nu.
00:23:06
Kommer du inte att fatta det om jag sitter där?
00:23:08
- Det är så det brukar vara. - Ja, förstår du. Det är teorin så här.
00:23:13
- Ja, och en grej vi kanske skulle ha nämnt i början, men som jag helt glömde bort,
00:23:18
För att opta in i React-daten måste man byta hur man skapar upp sin root-node.
00:23:26
- Jag vet inte vad det var, create... - Root.
00:23:31
- Create root. - Förut körde man render-metoden på React DOM direkt.
00:23:38
Eller från React DOM så att säga.
00:23:41
Men nu kommer det istället vara en funktion som heter create root.
00:23:44
Och sen så har den här roten som skapas har rendermetoden istället.
00:23:50
- Det känns som att jag har ett läxor här.
00:23:54
- Det förstår jag, men det är helt okej.
00:23:57
Just den grejen är också en grej man inte behöver lära sig.
00:24:01
För att man kommer göra det en gång i en app och sen är det klart.
00:24:04
- Ja, det var som när man skulle byta till Hydration.
00:24:07
När man körde server-side runderat.
00:24:10
Det var liksom en stor grej och sen så fick man ändå inte göra det för någon hade redan gjort det i appen.
00:24:19
Besvikelsen var total.
00:24:22
Ja, det var fan det.
00:24:25
Jag kommer ihåg, sa jag det i början, att React Conf också kommer upp nästa vecka tror jag.
00:24:32
Och då gissar jag också på att vi kommer få höra lite mer om React 18.
00:24:37
Och det kommer förmodligen komma ut lite mer väl genomtänkta presentationer av de här features vi har pratat om.
00:24:46
Jag tror det är den åttonde om jag inte minns helt fel. Det kan vara nionde också.
00:24:51
Och det är också remote och gratis. Så vill man kolla så kan man alltid gå in.
00:24:56
Allt kommer ju upp på Youtube efteråt om man vill kolla i efterhand.
00:24:59
Som även jag brukar göra.
00:25:01
- Ja, det är svårt om det är på arbetstid.
00:25:05
- Ja, det är typ om man slår igång det lite på sidan av.
00:25:08
Men det är alltid svårt att fokusera och då blir det liksom bara
00:25:11
halvmesyror av alltihopa.
00:25:14
- Ja, alltså jag sitter ju 100% mobb och pratar med andra människor.
00:25:20
- Du kan ju köra igång det där på sidan och sen bara "ni kan lyssna på den här presentationen"
00:25:25
De kommer bli superglada i ditt team.
00:25:29
Verkligen.
00:25:31
Som sagt, det kommer en massa mer saker efter React 18. Nu har inte vi insett att vi inte har jättemycket tid kvar att prata om det.
00:25:37
Kommer det några serverside-grejer i React 18 nu eller är det "deferred"?
00:25:43
Det är en bra fråga. Det kommer kanske lite grann med Hydration.
00:25:49
Jag har inte stenkoll på exakt change log, jag har mer plockat upp saker jag tycker ser intressanta ut.
00:25:58
Jag hade för mig att jag läste någonstans om suspensgrejen, den sköt mig ju på för att det blev en viktig sak med just service side-renderingen, hur skulle det funka.
00:26:08
Och det sköter mig ganska långt på så tycker jag läste någonstans att man inte bör använda API-produktion för att API-produktion kan nog komma ändras ganska mycket speciellt i och med React 18.
00:26:19
Men det kanske bara var rykten.
00:26:21
Jag kollade diskussionerna på React Working Group lite snabbt och skummade rubrikerna.
00:26:25
Och här finns det ett inlägg som heter "New Suspense Server-side Rendering Architecture in React 18".
00:26:31
Wow.
00:26:33
Första meningen är "React 18 will include architectural improvements to React server-side rendering performance.
00:26:40
These improvements are substantial and are the culmination of several years of work."
00:26:45
Just det. Så det kanske igen är mer bakomliggande saker och själva features kommer senare då?
00:26:54
Det verkar lite så. Det står att det mesta är behind the scenes.
00:26:59
Det finns några opt-in-mekanismer som man behöver veta.
00:27:03
Särskilt om man inte kör något ramverk ovanpå React.
00:27:09
Så det kommer någon nytt API som heter "Render to pipeable stream" till exempel.
00:27:14
Som tydligen ska vara sjukt nice då.
00:27:18
Enligt den där korta texten skummade precis.
00:27:20
- Toppen!
00:27:23
Just det, hade de inte någon namn på den förra arkitekturgrejen som var i 2017? Var det React Fiber? Eller var det i 2016?
00:27:30
Nej, 2016 kom väl React Fiber tror jag.
00:27:32
Och det var ju den nya arkitekturen för deras virtuella dom typ egentligen.
00:27:40
Just det, det var det. Så 2016 var också rätt mycket bakomliggande. Stora ändringarna var bakomliggande.
00:27:47
Jag menar 17 var för att det skulle bli lättare att uppdatera sen.
00:27:51
Och att man även ska kunna köra olika versioner av React i samma app.
00:27:55
Yes, exakt. Det stämmer.
00:27:58
Och sen kommer jag inte riktigt ihåg när Hooks kom.
00:28:00
16. någonting tror jag.
00:28:02
Var det typ 16.7?
00:28:04
Nja, det känns sent.
00:28:07
Ja, minns ej.
00:28:10
Jag vet inte, jag är verkligen bara...
00:28:14
Det är det jag gillar.
00:28:16
Ja, men det jag tänkte säga innan vi avrundar här är att det kommer lite andra coola saker som att de håller på att bygga ett cache API som ska kunna användas tillsammans med suspense.
00:28:27
De håller på med React Server Components som är att du kan köra vissa komponenter i klienten och vissa på servern på ett jävligt coolt sätt.
00:28:38
Det är så pass att komponenten i sig kan ha tillgång till Node-API, så du kan direkt ansluta till en databas eller läsa filer i en komponent om du vill.
00:28:48
- Det var det avsnittet om. - Just det, det pratade vi om i ett avsnitt.
00:28:52
Vi kan länka dit också.
00:28:55
Sen kommer jag inte ihåg om det är något mer nytt som är på G, men vi återkommer väl annars när det dyker upp saker.
00:29:07
Ja, för man kan ju tänka att vi pratar om mycket olika kodar, men det är ju React som är vår stora hjälte.
00:29:16
Så är det ju. Men det är också för att det är där vi kan.
00:29:19
Vi skulle ju lätt kunna prata om andra saker, men det skulle inte bli så jävla intressant.
00:29:23
Nej.
00:29:27
Nej.
00:29:27
Jag tänkte säga någonting självnedvärderande där, men jag ska inte göra det. Jag tränar.
00:29:33
Bra jobbat.
00:29:35
Nu slutar vi på topp idag, med att du inte nedvärderar dig själv.
00:29:39
- Jag gör det i mitt huvud. - Då är det dags att lägga på.
00:29:44
Kul att ni har lyssnat idag. Vi babblade på om React.
00:29:48
Har ni några andra frågor eller vill oss något så finns det på Twitter.
00:29:51
Recensera oss gärna på iTunes.
00:29:54
Med det så säger vi väl hej då för idag.
00:29:57
- Glad andra advent och sånt. - Det blir det.
00:30:02
Vi hörs igen om två veckor.
00:30:05
Så säger vi så.
00:30:06
– Ja. Hej då. – Hej då.
00:30:08
[Outromusik]
Tillbaka upp