[{"data":1,"prerenderedAt":97},["ShallowReactive",2],{"blog-en-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\u002Fen\u002Freact-18-concurrent.md","React 18: concurrent and smooth",{"type":7,"value":8,"toc":75},"minimark",[9,13,18,21,27,35,39,42,65,72],[10,11,12],"p",{},"React 18 has just landed, and it's one of those releases you only really understand once you\nbuild with it. At first glance little changes — most apps simply keep running. At second glance,\nhow React thinks about time has shifted.",[14,15,17],"h2",{"id":16},"concurrent-rendering","Concurrent rendering",[10,19,20],{},"The foundation is the concurrent architecture. React can now interrupt, pause and resume\nrendering instead of pushing an update through in one uninterruptible pass. That means an\nexpensive update no longer necessarily blocks what's more urgent right now — like typing or\nclicking.",[22,23,24],"blockquote",{},[10,25,26],{},"Smoothness doesn't come from everything being faster, but from the important thing coming first.",[10,28,29,30,34],{},"You feel this through ",[31,32,33],"code",{},"startTransition",". With it I mark an update as non-urgent — say, filtering\na long list — while the input itself stays instantly responsive. The interface remains live, even\nwhen a lot is happening underneath.",[14,36,38],{"id":37},"what-changes-day-to-day","What changes day to day",[10,40,41],{},"Two smaller additions I particularly like, because they just feel frictionless:",[43,44,45,53],"ul",{},[46,47,48,52],"li",{},[49,50,51],"strong",{},"Automatic batching"," now also groups state updates inside promises, timeouts and native\nevents into a single re-render — fewer wasted passes, with no effort from me.",[46,54,55,64],{},[49,56,57,60,61],{},[31,58,59],{},"useTransition"," and ",[31,62,63],{},"useDeferredValue"," give me fine control over what's allowed to wait.",[10,66,67,68,71],{},"Adoption is gentle: with ",[31,69,70],{},"createRoot"," I switch on the new capabilities, and a lot simply works\nbetter without rewriting code. The genuinely interesting patterns then arrive gradually.",[10,73,74],{},"For me, React 18 isn't a loud update. It's one that shifts responsibility: instead of juggling\nwhen things render myself, I just tell React what has priority — and let it handle the timing.\nThat's exactly what makes interfaces smooth without anyone seeing the machinery.",{"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 brings concurrent rendering, automatic batching and transitions — what that means for genuinely smooth user interfaces.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Freact-18-concurrent",{"title":5,"description":83},"blog\u002Fen\u002Freact-18-concurrent",[93,94,95],"React","Frontend","Performance","_yRm8r6Cw1NJcfYAAN0o3yVuMp1YUVVEFPUDZK5JToE",1781596072683]