From 7f6848bcbc7b01759cd38c20d4c803b71e010a48 Mon Sep 17 00:00:00 2001
From: Archanachaurasiya30 <chaurasiyaarchana2006@gmail.com>
Date: Tue, 27 Oct 2026 19:17:52 +0530
Subject: [PATCH 1/2] Fix confusing useTransition documentation example

Remove isPending state from TabButton component.
---
 src/content/reference/react/useTransition.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 6533a201bf3..0590a78542b 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -814,13 +814,11 @@ export default function TabContainer() {
 import { useTransition } from 'react';
 
 export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+  const [, startTransition] = useTransition();
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
+  
   return (
     <button onClick={() => {
       startTransition(async () => {

From 6f396cffb114229ebda191ab3fae10a9e050522f Mon Sep 17 00:00:00 2001
From: Archanachaurasiya30 <chaurasiyaarchana2006@gmail.com>
Date: Tue, 27 Oct 2026 19:44:03 +0530
Subject: [PATCH 2/2] Fix confusing useTransition documentation example

Removed isPending state handling from TabButton component and updated its usage.
---
 src/content/reference/react/useTransition.md | 39 +++++++++++---------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 0590a78542b..93c0a9f6bb1 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -653,13 +653,10 @@ export default function TabContainer() {
 import { useTransition } from 'react';
 
 export default function TabButton({ action, children, isActive }) {
-  const [isPending, startTransition] = useTransition();
+  const [, startTransition] = useTransition();
   if (isActive) {
     return <b>{children}</b>
   }
-  if (isPending) {
-    return <b className="pending">{children}</b>;
-  }
   return (
     <button onClick={async () => {
       startTransition(async () => {
@@ -818,7 +815,6 @@ export default function TabButton({ action, children, isActive }) {
   if (isActive) {
     return <b>{children}</b>
   }
-  
   return (
     <button onClick={() => {
       startTransition(async () => {
@@ -947,20 +943,29 @@ export default function TabContainer() {
 }
 ```
 
-```js src/TabButton.js
+import { useTransition } from 'react';
+
 export default function TabButton({ action, children, isActive }) {
-  if (isActive) {
-    return <b>{children}</b>
-  }
-  return (
-    <button onClick={() => {
-      action();
-    }}>
-      {children}
-    </button>
-  );
+const [isPending, startTransition] = useTransition();
+
+if (isActive) {
+return <b>{children}</b>;
 }
-```
+
+if (isPending) {
+return <b className="pending">{children}</b>;
+}
+
+return (
+<button onClick={() => {
+startTransition(async () => {
+await action();
+});
+}}>
+{children} </button>
+);
+}
+
 
 ```js src/AboutTab.js hidden
 export default function AboutTab() {