[{"data":1,"prerenderedAt":97},["ShallowReactive",2],{"blog-de-react-18-concurrent":3},{"id":4,"title":5,"body":6,"cover":81,"date":82,"description":83,"draft":84,"extension":85,"locale":86,"meta":87,"navigation":88,"path":89,"seo":90,"stem":91,"tags":92,"__hash__":96},"blog\u002Fblog\u002Fde\u002Freact-18-concurrent.md","React 18: nebenläufig und flüssig",{"type":7,"value":8,"toc":75},"minimark",[9,13,18,21,27,35,39,42,65,72],[10,11,12],"p",{},"React 18 ist gerade erschienen, und es ist eines dieser Releases, das man erst beim Bauen\nrichtig versteht. Auf den ersten Blick ändert sich wenig — die meisten Apps laufen einfach\nweiter. Auf den zweiten Blick verschiebt sich, wie React über Zeit denkt.",[14,15,17],"h2",{"id":16},"nebenläufiges-rendering","Nebenläufiges Rendering",[10,19,20],{},"Das Fundament ist die Concurrent-Architektur. React kann das Rendern jetzt unterbrechen,\npausieren und wieder aufnehmen, statt eine Aktualisierung in einem Stück durchzuziehen. Das\nheißt: Eine teure Aktualisierung blockiert nicht mehr zwingend das, was gerade dringender ist —\netwa Tippen oder Klicken.",[22,23,24],"blockquote",{},[10,25,26],{},"Flüssigkeit entsteht nicht dadurch, dass alles schneller ist, sondern dadurch, dass das Wichtige zuerst kommt.",[10,28,29,30,34],{},"Spürbar wird das über ",[31,32,33],"code",{},"startTransition",". Damit markiere ich eine Aktualisierung als nicht\ndringend — etwa das Filtern einer langen Liste — während die Eingabe selbst sofort reagiert.\nDie Oberfläche bleibt ansprechbar, auch wenn im Hintergrund viel passiert.",[14,36,38],{"id":37},"was-sich-im-alltag-ändert","Was sich im Alltag ändert",[10,40,41],{},"Zwei kleinere Neuerungen mag ich besonders, weil sie reibungslos wirken:",[43,44,45,53],"ul",{},[46,47,48,52],"li",{},[49,50,51],"strong",{},"Automatisches Batching"," fasst nun auch Zustandsänderungen in Promises, Timeouts und Events\nzu einem Re-Render zusammen — weniger unnötige Durchläufe, ganz ohne mein Zutun.",[46,54,55,64],{},[49,56,57,60,61],{},[31,58,59],{},"useTransition"," und ",[31,62,63],{},"useDeferredValue"," geben mir feine Kontrolle darüber, was warten darf.",[10,66,67,68,71],{},"Der Einstieg ist sanft: Mit ",[31,69,70],{},"createRoot"," aktiviere ich die neuen Fähigkeiten, und vieles\nfunktioniert sofort besser, ohne dass ich Code umschreiben muss. Die wirklich interessanten\nMuster kommen dann nach und nach dazu.",[10,73,74],{},"Für mich ist React 18 kein lautes Update. Es ist eines, das die Verantwortung verschiebt: Statt\nselbst zu jonglieren, wann was gerendert wird, sage ich React nur noch, was Priorität hat — und\nüberlasse ihm das Timing. Genau das macht Oberflächen flüssig, ohne dass man die Mechanik sieht.",{"title":76,"searchDepth":77,"depth":77,"links":78},"",2,[79,80],{"id":16,"depth":77,"text":17},{"id":37,"depth":77,"text":38},null,"2022-03-29","React 18 bringt nebenläufiges Rendering, automatisches Batching und Transitions — was das für wirklich flüssige Oberflächen bedeutet.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Freact-18-concurrent",{"title":5,"description":83},"blog\u002Fde\u002Freact-18-concurrent",[93,94,95],"React","Frontend","Performance","T_cSHBl13K1xnwviUAjxNwlwRZCs2s2U3e-O8GAYsF8",1781596071088]