{"componentChunkName":"component---src-templates-blog-post-js","path":"/react/transitions/","result":{"data":{"site":{"siteMetadata":{"title":"Recipes Collection","author":"Internet Community"}},"markdownRemark":{"id":"e7a1cb23-72c1-59f7-a87f-06e56ea8833c","html":"<ul>\n<li><a href=\"#introduction\">Introduction</a></li>\n<li>\n<p><a href=\"#transition-apis\">Transition APIs</a></p>\n<ul>\n<li><a href=\"#reactstarttransition\">React.startTransition</a></li>\n<li><a href=\"#reactusetransition\">React.useTransition</a></li>\n</ul>\n</li>\n</ul>\n<h1 id=\"introduction\"><a href=\"#introduction\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Introduction</h1>\n<ul>\n<li><code class=\"language-text\">Transitions</code> are a new concurrent feature introduced in React 18.</li>\n<li>They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.</li>\n</ul>\n<h1 id=\"transition-apis\"><a href=\"#transition-apis\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Transition APIs</h1>\n<h2 id=\"reactstarttransition\"><a href=\"#reactstarttransition\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React.startTransition</h2>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\">React<span class=\"token punctuation\">.</span><span class=\"token function\">startTransition</span><span class=\"token punctuation\">(</span>callback<span class=\"token punctuation\">)</span></code></pre></div>\n<ul>\n<li><code class=\"language-text\">React.startTransition</code> lets you mark updates inside the provided callback as transitions. </li>\n<li>This method is designed to be used when <code class=\"language-text\">React.useTransition</code> is not available for example in class based components.</li>\n<li><code class=\"language-text\">React.startTransition</code> does not provide an <code class=\"language-text\">isPending</code> flag. To track the pending status of a transition see <code class=\"language-text\">React.useTransition</code>.</li>\n</ul>\n<h2 id=\"reactusetransition\"><a href=\"#reactusetransition\" aria-hidden class=\"anchor\"><svg aria-hidden=\"true\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React.useTransition</h2>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>isPending<span class=\"token punctuation\">,</span> startTransition<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useTransition</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<ul>\n<li>Returns a stateful value for the pending state of the transition, and a function to start it.</li>\n<li><code class=\"language-text\">startTransition</code> lets you mark updates in the provided callback as transitions:</li>\n<li>The idea is that you can wrap state updates with <code class=\"language-text\">startTransition</code>, if they should be treated with a lower priority. For example, inside of that function, you perform your logic especially your state updating logic that should be treated with a lower priority.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token function\">startTransition</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">setCount</span><span class=\"token punctuation\">(</span>count <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre></div>\n<ul>\n<li><code class=\"language-text\">isPending</code> indicates when a transition is active to show a pending state.</li>\n<li>you could use <code class=\"language-text\">isPending</code> to update the UI, to show some fallback content whilst you’re waiting for the main state update to complete.</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"jsx\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">function</span> <span class=\"token function\">App</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>isPending<span class=\"token punctuation\">,</span> startTransition<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useTransition</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>count<span class=\"token punctuation\">,</span> setCount<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  \n  <span class=\"token keyword\">function</span> <span class=\"token function\">handleClick</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">startTransition</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n      <span class=\"token function\">setCount</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">c</span> <span class=\"token operator\">=></span> c <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n      </span><span class=\"token punctuation\">{</span>isPending <span class=\"token operator\">&amp;&amp;</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Spinner</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>button</span> <span class=\"token attr-name\">onClick</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>handleClick<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>count<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>button</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n    </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","timeToRead":2,"frontmatter":{"title":"Transitions","date":"April 23, 2022","spoiler":"Following are some notes collected through internet"},"fields":{"slug":"/react/transitions/","langKey":"en"}}},"pageContext":{"slug":"/react/transitions/","previous":{"fields":{"slug":"/react/web-components-with-react/","langKey":"en","directoryName":"web-components-with-react","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Web Components with React"}},"next":{"fields":{"slug":"/react/patterns/","langKey":"en","directoryName":"patterns","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Patterns"}},"translations":[],"translatedLinks":[]}}}