Sebastian Markbåge
@sebmarkbage.calyptus.eu
React · Next.js · Vercel
Like I spent a ton of work getting RSC and owner stack traces to be easy to implement in any framework. Testing it out in Next.js, only to get comments like this:
bsky.app/profile/afuz...
I wish I had just kept it all in Next.js instead.
bsky.app/profile/afuz...
I wish I had just kept it all in Next.js instead.
better errors than nextjs
🔥🔥🔥
🔥🔥🔥
April 10, 2025 at 9:19 PM
Like I spent a ton of work getting RSC and owner stack traces to be easy to implement in any framework. Testing it out in Next.js, only to get comments like this:
bsky.app/profile/afuz...
I wish I had just kept it all in Next.js instead.
bsky.app/profile/afuz...
I wish I had just kept it all in Next.js instead.
It can't have been more right. Both App Router and RSC are both coming from my vision for both. You may not like the outcome but there's no such thing as React taking it back.
This is why I don't want to contribute to new features to React anymore because anti-Next.js sentiment is souring it.
This is why I don't want to contribute to new features to React anymore because anti-Next.js sentiment is souring it.
April 10, 2025 at 9:04 PM
It can't have been more right. Both App Router and RSC are both coming from my vision for both. You may not like the outcome but there's no such thing as React taking it back.
This is why I don't want to contribute to new features to React anymore because anti-Next.js sentiment is souring it.
This is why I don't want to contribute to new features to React anymore because anti-Next.js sentiment is souring it.
The bug in development you ran into has been fixed.
We also added a warning for duplicate view transition names which is also in your demo.
You can try it out with latest Next.js canary.
We also added a warning for duplicate view transition names which is also in your demo.
You can try it out with latest Next.js canary.
April 1, 2025 at 6:49 PM
The bug in development you ran into has been fixed.
We also added a warning for duplicate view transition names which is also in your demo.
You can try it out with latest Next.js canary.
We also added a warning for duplicate view transition names which is also in your demo.
You can try it out with latest Next.js canary.
Well, with one exception. It doesn't have a pending status. We went with `.status = "pending"` for that.
March 21, 2025 at 2:31 PM
Well, with one exception. It doesn't have a pending status. We went with `.status = "pending"` for that.
And the shape of the information exposed is already spec:ed in allSettled!
March 21, 2025 at 2:30 PM
And the shape of the information exposed is already spec:ed in allSettled!
React looks for the same names of the fields as allSettled.
developer.mozilla.org/en-US/docs/W...
They can also be updated after it resolves. This is used by RSC when it provides data to React to allow streaming to be free when it's already loaded. Other libraries can use the same optimization.
developer.mozilla.org/en-US/docs/W...
They can also be updated after it resolves. This is used by RSC when it provides data to React to allow streaming to be free when it's already loaded. Other libraries can use the same optimization.
Promise.allSettled() - JavaScript | MDN
The Promise.allSettled() static method takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises settle (including when an em...
developer.mozilla.org
March 21, 2025 at 2:49 AM
React looks for the same names of the fields as allSettled.
developer.mozilla.org/en-US/docs/W...
They can also be updated after it resolves. This is used by RSC when it provides data to React to allow streaming to be free when it's already loaded. Other libraries can use the same optimization.
developer.mozilla.org/en-US/docs/W...
They can also be updated after it resolves. This is used by RSC when it provides data to React to allow streaming to be free when it's already loaded. Other libraries can use the same optimization.
class RejectedPromise extends Promise {
constructor(reason) {
super((resolve, reject) => reject(reason));
this.status = 'rejected';
this.reason = reason;
}
}
constructor(reason) {
super((resolve, reject) => reject(reason));
this.status = 'rejected';
this.reason = reason;
}
}
March 21, 2025 at 2:49 AM
class RejectedPromise extends Promise {
constructor(reason) {
super((resolve, reject) => reject(reason));
this.status = 'rejected';
this.reason = reason;
}
}
constructor(reason) {
super((resolve, reject) => reject(reason));
this.status = 'rejected';
this.reason = reason;
}
}
class ResolvedPromise extends Promise {
constructor(value) {
super(resolve => resolve(value));
this.status = 'fulfilled';
this.value = value;
}
}
constructor(value) {
super(resolve => resolve(value));
this.status = 'fulfilled';
this.value = value;
}
}
March 21, 2025 at 2:49 AM
class ResolvedPromise extends Promise {
constructor(value) {
super(resolve => resolve(value));
this.status = 'fulfilled';
this.value = value;
}
}
constructor(value) {
super(resolve => resolve(value));
this.status = 'fulfilled';
this.value = value;
}
}
You're not from New York unless you were born in the five boroughs, definitely not New Jersey, but with the right attitude you can be a True New Yorker.
March 14, 2025 at 3:39 PM
You're not from New York unless you were born in the five boroughs, definitely not New Jersey, but with the right attitude you can be a True New Yorker.
Long Island City is in Queens which is on Long Island but not out on Long Island.
March 14, 2025 at 3:33 PM
Long Island City is in Queens which is on Long Island but not out on Long Island.
Western New York is basically Canada.
March 14, 2025 at 3:19 PM
Western New York is basically Canada.
Long Island excludes Queens which on Long Island.
Westchester is upstate from New York but not in Upstate New York.
Upstate New York includes Connecticut and Vermont.
Westchester is upstate from New York but not in Upstate New York.
Upstate New York includes Connecticut and Vermont.
March 14, 2025 at 3:13 PM
Long Island excludes Queens which on Long Island.
Westchester is upstate from New York but not in Upstate New York.
Upstate New York includes Connecticut and Vermont.
Westchester is upstate from New York but not in Upstate New York.
Upstate New York includes Connecticut and Vermont.
I learned from scuba and snorkeling not to trust sunscreen in water. I just reapply after dry and not expecting to get back in the water.
March 13, 2025 at 3:42 AM
I learned from scuba and snorkeling not to trust sunscreen in water. I just reapply after dry and not expecting to get back in the water.
As a fellow ghost, long sleeve rash guard is the way.
March 13, 2025 at 3:24 AM
As a fellow ghost, long sleeve rash guard is the way.
It would be something you register with RN and then refer to by the generated "class" but it can also be built-ins.
The "className" prop name is expected to change though so in React it won't actually have the word "class" in it anyway. You often use the enter/exit/update/share ones instead.
The "className" prop name is expected to change though so in React it won't actually have the word "class" in it anyway. You often use the enter/exit/update/share ones instead.
March 12, 2025 at 3:23 PM
It would be something you register with RN and then refer to by the generated "class" but it can also be built-ins.
The "className" prop name is expected to change though so in React it won't actually have the word "class" in it anyway. You often use the enter/exit/update/share ones instead.
The "className" prop name is expected to change though so in React it won't actually have the word "class" in it anyway. You often use the enter/exit/update/share ones instead.
The idea is that ideally you would actually have a CSS library specifying a bunch of different view-transition-classes and you'd just pick among those.
The React API makes more sense from that perspective because otherwise you might expect more low level helpers for filling in the values.
The React API makes more sense from that perspective because otherwise you might expect more low level helpers for filling in the values.
March 12, 2025 at 3:02 PM
The idea is that ideally you would actually have a CSS library specifying a bunch of different view-transition-classes and you'd just pick among those.
The React API makes more sense from that perspective because otherwise you might expect more low level helpers for filling in the values.
The React API makes more sense from that perspective because otherwise you might expect more low level helpers for filling in the values.
But yes, useId also works for generated styles that has to be dynamically generated for a specific instance.
github.com/facebook/rea...
You can also use programmatic approaches for generated styles. Those don't work with SSR triggered transitions (Suspense) though.
github.com/facebook/rea...
github.com/facebook/rea...
You can also use programmatic approaches for generated styles. Those don't work with SSR triggered transitions (Suspense) though.
github.com/facebook/rea...
Use valid CSS selectors in useId format by sebmarkbage · Pull Request #32001 · facebook/react
For the useId algorithm we used colon : before and after. #23360
This avoids collisions in general by using an unusual characters. It also avoids collisions when concatenated with some other ID. Un...
github.com
March 12, 2025 at 2:46 PM
But yes, useId also works for generated styles that has to be dynamically generated for a specific instance.
github.com/facebook/rea...
You can also use programmatic approaches for generated styles. Those don't work with SSR triggered transitions (Suspense) though.
github.com/facebook/rea...
github.com/facebook/rea...
You can also use programmatic approaches for generated styles. Those don't work with SSR triggered transitions (Suspense) though.
github.com/facebook/rea...
The recommended approach is to use view-transition-classes specified and not style using names.
<ViewTransition className="...">*
You can also specify different ones for enter/exit/update.
* Note this prop name is likely getting renamed.
<ViewTransition className="...">*
You can also specify different ones for enter/exit/update.
* Note this prop name is likely getting renamed.
March 12, 2025 at 2:43 PM
The recommended approach is to use view-transition-classes specified and not style using names.
<ViewTransition className="...">*
You can also specify different ones for enter/exit/update.
* Note this prop name is likely getting renamed.
<ViewTransition className="...">*
You can also specify different ones for enter/exit/update.
* Note this prop name is likely getting renamed.
Note that there was a period where the framework detection code relied on an HTML attribute which was removed in 18. Therefore adoption of 18 was lost for a period before the detection mechanism updated. Not sure but it might explain temporary gap in growth. It's a data collection bug.
March 11, 2025 at 4:26 PM
Note that there was a period where the framework detection code relied on an HTML attribute which was removed in 18. Therefore adoption of 18 was lost for a period before the detection mechanism updated. Not sure but it might explain temporary gap in growth. It's a data collection bug.