{"id":419826,"date":"2022-03-22T13:00:40","date_gmt":"2022-03-22T10:00:40","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/whats-coming-in-react-18-cloudsavvy-it\/"},"modified":"2022-03-22T13:00:40","modified_gmt":"2022-03-22T10:00:40","slug":"whats-coming-in-react-18-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/","title":{"rendered":"#What\u2019s Coming In React 18? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a272f7a768c9\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a272f7a768c9\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#%E2%80%9CWhats_Coming_In_React_18_%E2%80%93_CloudSavvy_IT%E2%80%9D\" >&#8220;What\u2019s Coming In React 18? \u2013 CloudSavvy IT&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Concurrent_Rendering\" >Concurrent Rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Concurrent_Mode_vs_Concurrent_Rendering\" >Concurrent Mode vs Concurrent Rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#The_New_Root_API_Activating_Concurrent_Mode\" >The New Root API (Activating Concurrent Mode)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Concurrent_Features\" >Concurrent Features<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Suspense\" >Suspense<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Transitions\" >Transitions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Deferred_Values\" >Deferred Values<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Better_Batching\" >Better Batching<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Server-Side_Rendering_Changes\" >Server-Side Rendering Changes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/buradabiliyorum.com\/en\/whats-coming-in-react-18-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CWhats_Coming_In_React_18_%E2%80%93_CloudSavvy_IT%E2%80%9D\"><\/span>&#8220;What\u2019s Coming In React 18? \u2013 CloudSavvy IT&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-8770\" data-pagespeed-lazy-srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>React 18 will be the next major version of the popular Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> component library. Now available as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/08\/react-18-upgrade-guide.html\">a release candidate<\/a>, it introduces several changes to improve data fetches, performance and server-side rendering.<\/p>\n<p>To take advantage of all the features, you\u2019ll need to upgrade your project and may encounter some breaking changes. React 18 is still <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>ly backwards compatible with older code though. You should be able to bump the release version in your <code>package.json<\/code> without facing too many im<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a>te issues.<\/p>\n<h2 id=\"concurrent-rendering\"><span class=\"ez-toc-section\" id=\"Concurrent_Rendering\"><\/span>Concurrent Rendering<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The motivation behind most of React 18\u2019s revisions concerns something called \u201cconcurrent rendering.\u201d This mechanism gives React a way to assemble multiple versions of your component tree simultaneously. While the details of this are only relevant to the library\u2019s internals, the outcome is increased flexibility and enhanced performance for your app.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/concurrent-mode-intro.html\">Concurrent rendering<\/a> makes the rendering process interruptible. Whereas a render in React 17 must run to completion once it\u2019s begun, React 18 provides a way to pause mid-way through and resume it later.<\/p>\n<p>This ability means React renders are less likely to impact overall browser performance. Up until now, browser events like key presses and paints are blocked while a render\u2019s ongoing. With concurrent rendering enabled, a key press will interrupt the render, allow the browser to handle the change, and then resume the rendering.<\/p>\n<p>This results in a smoother user experience that\u2019s less susceptible to stutter when rendering coincides with other activities. React maintains multiple branches of work; once one branch\u2019s rendering is complete, which might occur over several distinct sessions, it gets accepted into the main branch that produces the visible UI.<\/p>\n<h2 id=\"concurrent-mode-vs-concurrent-rendering\"><span class=\"ez-toc-section\" id=\"Concurrent_Mode_vs_Concurrent_Rendering\"><\/span>Concurrent Mode vs Concurrent Rendering<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Prior to React 18 attaining alpha status, this feature was referred to as \u201cconcurrent mode.\u201d You might still see this name in older articles and documentation. The concept of concurrent rendering as a separate mode no longer exists in React 18. This makes it easier for existing applications to move to the new approach.<\/p>\n<p>Concurrent rendering is fundamentally different to the existing rendering system. It has an entirely new API that replaces the familiar <code>ReactDOM.render()<\/code>. Back in the days of concurrent mode, concurrency was all-or-nothing: it was either enabled for your app, with the prospect of major breaking changes, or completely off limits. Now it\u2019s handled more gracefully with React only applying concurrent rendering to DOM updates that actually require a concurrent feature.<\/p>\n<h2 id=\"the-new-root-api-activating-concurrent-mode\"><span class=\"ez-toc-section\" id=\"The_New_Root_API_Activating_Concurrent_Mode\"><\/span>The New Root API (Activating Concurrent Mode)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Existing apps upgraded to React 18 can keep using <code>ReactDOM.render()<\/code> for the foreseeable future. This will render your app without concurrency support, using the familiar renderer from v17. You\u2019ll see a console warning that the API\u2019s no longer supported but this can be disregarded while you upgrade.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ \"ReactDOM.render is no longer supported in React 18\"<\/span>\nReactDOM.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"root\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>To remove the warning, switch to the new <code>createRoot()<\/code> API:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>createRoot<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\/client\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> root <span class=\"sy0\">=<\/span> createRoot<span class=\"br0\">(<\/span>document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"root\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nroot.<span class=\"me1\">render<\/span><span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><code>createRoot()<\/code> returns a new root object that represents a React rendering surface. You can call its <code>render()<\/code> method to render a React component to the root. The outcome of the above code is the same as the earlier <code>ReactDOM.render()<\/code> example. <code>createRoot()<\/code> is a more object-oriented interface with improved ease of use.<\/p>\n<p>Roots produced by <code>createRoot()<\/code> support concurrent rendering. Upgrading to this API gives you opt-in access to the new capabilities of React 18.<\/p>\n<p>The <code>createRoot()<\/code> equivalent of <code>ReactDOM.unmountComponentAtNode()<\/code> is the new <code>unmount()<\/code> method exposed on root objects. You can use this to detach your React component tree and stop rendering your app:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> App from <span class=\"st0\">\".\/App.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">import<\/span> ReactDOM from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ OLD<\/span>\nReactDOM.<span class=\"me1\">unmountComponentAtNode<\/span><span class=\"br0\">(<\/span>document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"root\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ NEW<\/span>\n<span class=\"kw1\">const<\/span> root <span class=\"sy0\">=<\/span> createRoot<span class=\"br0\">(<\/span>document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"root\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nroot.<span class=\"me1\">unmount<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"concurrent-features\"><span class=\"ez-toc-section\" id=\"Concurrent_Features\"><\/span>Concurrent Features<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Concurrent rendering lets you use concurrent features to improve your app\u2019s performance. Here are some of the key APIs available.<\/p>\n<h3 id=\"suspense\"><span class=\"ez-toc-section\" id=\"Suspense\"><\/span>Suspense<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>&lt;Suspense&gt;<\/code> component has been around since React 16. It lets you prevent a component\u2019s children from being rendered until a condition has been met. It\u2019s commonly used for data fetches and asynchronous module imports.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> fetchPostHistory <span class=\"sy0\">=<\/span> id <span class=\"sy0\">=&gt;<\/span> fetch<span class=\"br0\">(<\/span>`<span class=\"sy0\">\/<\/span>users<span class=\"sy0\">\/<\/span>$<span class=\"br0\">{<\/span>id<span class=\"br0\">}<\/span><span class=\"sy0\">\/<\/span>posts`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> UserCard <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>Id<span class=\"sy0\">,<\/span> Name<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>postHistory<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> fetchPostHistory<span class=\"br0\">(<\/span>Id<span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;<\/span>h1<span class=\"sy0\">&gt;<\/span><span class=\"br0\">{<\/span>Name<span class=\"br0\">}<\/span><span class=\"sy0\">&lt;\/<\/span>h1<span class=\"sy0\">&gt;<\/span>\n        <span class=\"sy0\">&lt;<\/span>React.<span class=\"me1\">Suspense<\/span> fallback<span class=\"sy0\">=<\/span><span class=\"st0\">\"Loading...\"<\/span><span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>UserPostHistoryList posts<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>postHistory<span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>ReportUserLink id<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>Id<span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n        <span class=\"sy0\">&lt;\/<\/span>React.<span class=\"me1\">Suspense<\/span><span class=\"sy0\">&gt;<\/span>\n    <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>In this example, neither the <code>UserPostHistory<\/code> or <code>ReportUserLink<\/code> components will appear until the user\u2019s post history data been fetched from the network. This already works well in many situations but the React 17 implementation has some quirks.<\/p>\n<p>If you logged each component\u2019s effects, you\u2019d see the <code>ReportUserLink<\/code> component was rendered while the posts were still loading, even though it\u2019s not visible at that point. Using the explanation of concurrency from earlier, it\u2019s possible to explain why: once React started rendering the component tree, it had no way of stopping, even though a human can spot that <code>ReportUserLink<\/code> is redundant until <code>postHistory<\/code> is populated.<\/p>\n<p>Suspense is more powerful in React 18. The new version is called \u201cConcurrent Suspense\u201d; the previous implementation is now referred to as Legacy Suspense. It solves the problem in the example above: rendering the same code with concurrency enabled will prevent the renderer reaching <code>&lt;ReportUserLink&gt;<\/code> while the data fetch is ongoing.<\/p>\n<p>Logging each component\u2019s effects would show that <code>ReportUserLink<\/code> only gets committed once the post history is available. React interrupts the render when it reaches <code>UserPostHistoryList<\/code> and needs to wait for the data to load. Once the network call\u2019s complete, React resumes rendering the rest of the Suspense sub-tree.<\/p>\n<p>This capability helps avoid wasteful work which your users never benefit from. It also solves several problems with Suspense where components may have run effects earlier than you expected. Finally, this solution provides an automatic guarantee that data will arrive in the order it was requested. You don\u2019t need to worry about race conditions as rendering is interrupted while data is fetched.<\/p>\n<h3 id=\"transitions\"><span class=\"ez-toc-section\" id=\"Transitions\"><\/span>Transitions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Transitions are a new concurrent-enabled feature. This API is a way of signalling to React the relative priorities of your UI updates. A \u201ctransition\u201d is a relatively low-priority update, such as changing between major screens. Updates such as re-renders in response to keyboard input and other user interactions are considered more urgent.<\/p>\n<p>Marking an update as a transition has a few effects on how React approaches its fulfillment. React will use the interruptible rendering capabilities of concurrency to pause the update if a more urgent one comes along mid-way through. This will help keep your UI responsive to user input while rendering\u2019s ongoing, reducing stuttering and jank.<\/p>\n<p>Transitions are useful in a broad range of situations: updating a notifications pane in your app\u2019s header, managing updates to your sidebar, and changing other auxiliary functions of your UI are all good candidates. They also work well for asynchronous actions taken in response to user input, such as the classic case of a search bar which updates as the user types.<\/p>\n<p>This can be hard to get right in React \u2013 without careful debouncing, it\u2019s common to feel perceptible lag as updates caused by fetching new results temporarily block the main thread from handling keyboard input. With React 18, you can use a transition to mark those updates as low-priority work.<\/p>\n<p>The <code>startTransition()<\/code> API encapsulates state updates as transitions:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>startTransition<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>searchQuery<span class=\"sy0\">,<\/span> setSearchQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>searchResults<span class=\"sy0\">,<\/span> setSearchResults<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"coMULTI\">\/**\n     * State updates within the transition function are low-priority\n     *\/<\/span>\n    startTransition<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n        setSearchResults<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>text<span class=\"sy0\">:<\/span> <span class=\"st0\">\"Search Result 1\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>If you want to check whether an update\u2019s ongoing, replace plain <code>startTransition()<\/code> with the <code>useTransition()<\/code> hook. This gives you a boolean indicating whether a transition has pending work.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>useTransition<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>searchQuery<span class=\"sy0\">,<\/span> setSearchQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>searchResults<span class=\"sy0\">,<\/span> setSearchResults<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>isSearching<span class=\"sy0\">,<\/span> startSearchResultsTransition<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useTransition<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    startSearchResultsTransition<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n        setSearchResults<span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>text<span class=\"sy0\">:<\/span> <span class=\"st0\">\"Search Result 1\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>\n        <span class=\"sy0\">&lt;<\/span>div<span class=\"sy0\">&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>input onChange<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>setSearchQuery<span class=\"br0\">}<\/span> value<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>searchQuery<span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n            <span class=\"sy0\">&lt;<\/span>SearchResults results<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>searchResults<span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;<\/span>\n            <span class=\"br0\">{<\/span><span class=\"br0\">(<\/span>isSearching <span class=\"sy0\">&amp;&amp;<\/span> <span class=\"st0\">\"(Searching...)\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span>\n        <span class=\"sy0\">&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span>\n    <span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>All existing state updates are treated as regular urgent updates to maintain backwards compatibility with older code.<\/p>\n<h3 id=\"deferred-values\"><span class=\"ez-toc-section\" id=\"Deferred_Values\"><\/span>Deferred Values<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Deferred values are another way of maintaining responsiveness during long-running updates. When a value\u2019s deferred by the <code>useDeferredValue()<\/code> hook, React will keep showing its <em>old<\/em> value for a specified period.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>results<span class=\"sy0\">,<\/span> setResults<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"br0\">[<\/span><span class=\"br0\">]<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> deferredResults <span class=\"sy0\">=<\/span> useDeferredResults<span class=\"br0\">(<\/span>results<span class=\"sy0\">,<\/span> <span class=\"br0\">{<\/span>timeoutMs<span class=\"sy0\">:<\/span> <span class=\"nu0\">5000<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"sy0\">&lt;<\/span>ResultsGrid results<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>deferredResults<span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;;<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Allowing React to keep showing the old results for five seconds avoids slowdowns by removing the need to immediately render fetched data as soon as it arrives. It\u2019s a form of debouncing that\u2019s integrated into React\u2019s state management. Data may lag behind the real state by a few seconds in order to reduce the overall amount of work performed.<\/p>\n<h2 id=\"better-batching\"><span class=\"ez-toc-section\" id=\"Better_Batching\"><\/span>Better Batching<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A final performance-oriented change in React 18 consists of a set of improvements to state update batching. React already tries to combine state updates in several simple situations:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>query<span class=\"sy0\">,<\/span> setQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryCount<span class=\"sy0\">,<\/span> setQueryCount<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"coMULTI\">\/**\n     * Two state updates, only one re-render\n     *\/<\/span>\n    setQuery<span class=\"br0\">(<\/span><span class=\"st0\">\"demo\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    setQueryCount<span class=\"br0\">(<\/span>queryCount <span class=\"sy0\">+<\/span> <span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>However there are several situations where this doesn\u2019t work. Starting with React 18, batching applies to <em>all<\/em> updates, irrespective of where they come from. Updates that originate from timeouts, promises, and browser event handlers will be fully batched in the same way as code that\u2019s directly within your component.<\/p>\n<p>This change may alter how some code behaves. If you\u2019ve got an old component that updates state multiple times in the places listed above, then checks values mid-way through, you might find they\u2019re not what you expect in React 18. A <code>flushSync<\/code> method is available to manually force a state update to commit, letting you opt-out of batching.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> Component <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>query<span class=\"sy0\">,<\/span> setQuery<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">const<\/span> <span class=\"br0\">[<\/span>queryCount<span class=\"sy0\">,<\/span> setQueryCount<span class=\"br0\">]<\/span> <span class=\"sy0\">=<\/span> useState<span class=\"br0\">(<\/span><span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n    <span class=\"kw1\">const<\/span> handleSearch <span class=\"sy0\">=<\/span> query <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n       fetch<span class=\"br0\">(<\/span>query<span class=\"br0\">)<\/span>.<span class=\"me1\">then<\/span><span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n\u00a0\n            <span class=\"coMULTI\">\/**\n             * Force commit and update the DOM\n             *\/<\/span>\n            flushSync<span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> setQuery<span class=\"br0\">(<\/span>query<span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n            setQueryCount<span class=\"br0\">(<\/span><span class=\"nu0\">1<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"server-side-rendering-changes\"><span class=\"ez-toc-section\" id=\"Server-Side_Rendering_Changes\"><\/span>Server-Side Rendering Changes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Server-side rendering has been heavily revised. The headline new feature is support for streaming rendering, where new HTML can be streamed from the server to your React client. This lets you use Suspense components on the server-side.<\/p>\n<p>As a consequence of this change, several APIs have been deprecated or reworked, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2022\/03\/08\/react-18-upgrade-guide.html#updates-to-server-rendering-apis\">including <code>renderToNodeStream()<\/code><\/a>. You should now use <code>renderToPipeableStream()<\/code> or <code>renderToReadableStream()<\/code> to deliver server-side content that\u2019s compatible with modern streaming environments.<\/p>\n<p>Client-side hydration of server-rendered content has also changed to align with the new concurrent rendering API. If you\u2019re using server rendering and concurrent mode, replace <code>hydrate()<\/code> with <code>hydrateRoot()<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"co1\">\/\/ OLD<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>hydrate<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\"<\/span><span class=\"sy0\">;<\/span>\nhydrate<span class=\"br0\">(<\/span><span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;,<\/span> document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"root\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ NEW<\/span>\n<span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>hydrateRoot<span class=\"br0\">}<\/span> from <span class=\"st0\">\"react-dom\/client\"<\/span><span class=\"sy0\">;<\/span>\nhydrateRoot<span class=\"br0\">(<\/span>document.<span class=\"me1\">getElementById<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"root\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">,<\/span> <span class=\"sy0\">&lt;<\/span>App <span class=\"sy0\">\/&gt;<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The effects of streaming rendering make server rendering more suitable for varied use cases. The existing implementation of server-side React requires the client to fetch and hydrate the entire application before it becomes interactive. By adding streams and Suspense, React <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/22\">can fetch only<\/a> the bits needed for the initial render, then load additional non-essential data from the server after the app becomes interactive.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React 18 brings new features and performance enhancements for your applications. Capabilities like Suspense and Transitions make several types of code easier to write and less impactful on other areas of your app.<\/p>\n<p>Upgrading to React 18 when it releases should be fairly pain-free in most cases. You can keep using React 17\u2019s root API for the time being before moving to <code>createRoot()<\/code> when you\u2019re ready to adopt concurrent rendering. If you want to start preparing your app today, you can install the latest release candidate by running <code>npm install react@rc react-dom@rc<\/code>.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/15975\/whats-coming-in-react-18\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;What\u2019s Coming In React 18? \u2013 CloudSavvy IT&#8221; React 18 will be the next major version of the popular JavaScript component library. Now available as a release candidate, it introduces several changes to improve data fetches, performance and server-side rendering. To take advantage of all the features, you\u2019ll need to upgrade your project and may&#8230;<\/p>\n","protected":false},"author":1,"featured_media":419827,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-419826","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/419826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=419826"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/419826\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/419827"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=419826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=419826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=419826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}