From b4610fbd4410371958587f2fdfd6c43d073cb918 Mon Sep 17 00:00:00 2001
From: Maken Cristhian <96421658+MakenRosa@users.noreply.github.com>
Date: Mon, 22 Jun 2026 12:23:01 -0300
Subject: [PATCH 01/12] Clarify useLayoutEffect setup timing (#8488)
---
src/content/reference/react/useLayoutEffect.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 24b360404..79263b8e7 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -47,7 +47,7 @@ function Tooltip() {
#### Parameters {/*parameters*/}
-* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your [component commits](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom), React will run your setup function. After every commit with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
+* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. After your [component commits](/learn/render-and-commit#step-3-react-commits-changes-to-the-dom) to the DOM and before the browser repaints the screen, React will run your setup function. After every commit with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If you omit this argument, your Effect will re-run after every commit of the component.
From ecf6c2f191844815923add7ea551fb7b9ba76f6d Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Wed, 24 Jun 2026 19:12:41 +0200
Subject: [PATCH 02/12] Increase dark-mode button contrast (#8494)
Bumps button contrast to match the treatment on reactnative.dev.
Dark mode:
- primary text: dark:text-secondary (#404756) -> dark:text-gray-90 (#23272F)
- secondary border: #404756 -> #4E5769 (matches RN's rgb(78,86,104))
Light mode:
- secondary border: #D9DBE3 -> #BCC1CD (matches RN's rgb(188,193,205))
gray-90 keeps a subtle cyan tint on the teal button, per review feedback
(gray-95 was too flat).
---
src/components/ButtonLink.tsx | 2 +-
tailwind.config.js | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index bd98d5b38..dff09ed3a 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -33,7 +33,7 @@ function ButtonLink({
className,
'active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug',
{
- 'bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80':
+ 'bg-link text-white dark:bg-brand-dark dark:text-gray-90 hover:bg-opacity-80':
type === 'primary',
'text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10':
type === 'secondary',
diff --git a/tailwind.config.js b/tailwind.config.js
index 9450cfa59..85d0e7050 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -46,8 +46,8 @@ module.exports = {
'inner-border-dark': 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)',
'outer-border': '0 0 0 1px rgba(0, 0, 0, 0.1)',
'outer-border-dark': '0 0 0 1px rgba(255, 255, 255, 0.1)',
- 'secondary-button-stroke': 'inset 0 0 0 1px #D9DBE3',
- 'secondary-button-stroke-dark': 'inset 0 0 0 1px #404756',
+ 'secondary-button-stroke': 'inset 0 0 0 1px #BCC1CD',
+ 'secondary-button-stroke-dark': 'inset 0 0 0 1px #4E5769',
none: 'none',
},
extend: {
From fb3854a4fc28a5ec853fb3bfdf40a60ed44a7c65 Mon Sep 17 00:00:00 2001
From: Ricky {user.name}
;
+}
+```
+
+Reading the value requires two `use` calls because the context value itself isn't awaited. See [Before you use context](/learn/passing-data-deeply-with-context#before-you-use-context) for alternatives to consider before reaching for context.
+
+Wrap the components that read the Promise in a [Suspense](/reference/react/Suspense) boundary so only that subtree suspends while the Promise is pending. See [Usage (Promises)](#usage-promises) below for more on reading Promises with `use`.
+
+
+ {albums.map(album => (
+
+ );
+}
+```
+
+Wrap the component that calls
Error: {error.message}
; + } + + return ( +Render count: {count}
+