fix(react): allow key attribute on components created by with by geongyu09 · Pull Request #1981 · toss/suspensive

geongyu09 · 2026-08-24T15:23:50Z

Overview

Suspense.with, ErrorBoundary.with, ErrorBoundaryGroup.with, Delay.with, and ClientOnly.with reject the React-reserved key attribute when the wrapped component takes no props.

const Wrapped = Suspense.with({ fallback: null }, () => <></>)

// ❌ Type 'string' is not assignable to type 'never'.
const list = [<Wrapped key="a" />, <Wrapped key="b" />]

Cause

The TProps type parameter of every with helper defaults to Record<string, never>. Its string index signature makes every attribute — including key — resolve to never, so TypeScript rejects key even though React always accepts it on any element.

Fix

Change the default to Record<never, never>.

It still means "no props" — arbitrary props such as foo="bar" remain a type error — but it has no index signature, so React's own key handling applies again. The same change is applied to all five components for consistency.

- with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+ with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(

Tests

Added type tests (*.test-d.tsx) for each of the five with helpers covering:

key is accepted when the wrapped component has no props
arbitrary props are still rejected (@ts-expect-error)
key works alongside inferred props

Also added a patch changeset for @suspensive/react.

PR Checklist

I did below actions if need

I read the Contributing Guide
I added documents and tests.

coauthors · 2026-08-24T15:23:53Z

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@Copilot	#1981 (comment) #1981 (comment) #1981 (comment) #1981 (comment) #1981 (comment)	5	`Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>`
@geongyu09	#1981 (comment) #1981 (review) #1981	3	`Co-authored-by: geongyu09 <67491015+geongyu09@users.noreply.github.com>`
@manudeli	#1981 (comment) #1981 (review) #1981 (review)	3	`Co-authored-by: manudeli <61593290+manudeli@users.noreply.github.com>`
@codecov-commenter	#1981 (comment)	1	`Co-authored-by: codecov-commenter <65553080+codecov-commenter@users.noreply.github.com>`

vercel · 2026-08-24T15:23:55Z

@geongyu09 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

changeset-bot · 2026-08-24T15:24:00Z

🦋 Changeset detected

Latest commit: fa70671

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@suspensive/react	Patch
@suspensive/codemods	Patch
@suspensive/jotai	Patch
@suspensive/react-query-4	Patch
@suspensive/react-query-5	Patch
@suspensive/react-query	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codecov-commenter · 2026-08-25T04:14:51Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.22%. Comparing base (d86e08a) to head (fa70671).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1981   +/-   ##
=======================================
  Coverage   93.22%   93.22%           
=======================================
  Files          42       42           
  Lines         664      664           
  Branches      163      163           
=======================================
  Hits          619      619           
  Misses         42       42           
  Partials        3        3

Components	Coverage Δ
@suspensive/react	`100.00% <ø> (ø)`
@suspensive/react-query	`95.83% <ø> (ø)`
@suspensive/react-query-4	`100.00% <ø> (ø)`
@suspensive/react-query-5	`100.00% <ø> (ø)`
@suspensive/jotai	`100.00% <ø> (ø)`
@suspensive/codemods	`81.60% <ø> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

🟢 Approval recommended

The focused type fix is covered by regression tests, with no unresolved issues.

Pull request overview

Updates React with helpers so prop-less components accept the reserved key attribute while rejecting arbitrary props.

Changes:

Updates default prop types across five helpers.
Adds compile-time regression tests.
Adds a patch changeset for @suspensive/react.

File summaries

File	Description
`packages/react/src/Suspense.tsx`	Updates default wrapped-component props.
`packages/react/src/Suspense.test-d.tsx`	Tests `Suspense.with` typing.
`packages/react/src/ErrorBoundaryGroup.tsx`	Updates default wrapped-component props.
`packages/react/src/ErrorBoundaryGroup.test-d.tsx`	Tests `ErrorBoundaryGroup.with` typing.
`packages/react/src/ErrorBoundary.tsx`	Updates default wrapped-component props.
`packages/react/src/ErrorBoundary.test-d.tsx`	Tests `ErrorBoundary.with` typing.
`packages/react/src/Delay.tsx`	Updates default wrapped-component props.
`packages/react/src/Delay.test-d.tsx`	Tests `Delay.with` typing.
`packages/react/src/ClientOnly.tsx`	Updates default wrapped-component props.
`packages/react/src/ClientOnly.test-d.tsx`	Tests `ClientOnly.with` typing.
`.changeset/fix-with-key-attribute.md`	Records the patch release.

Review details

Files reviewed: 11/11 changed files
Comments generated: 0
Review effort level: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

manudeli

Good catch, thanks! 👀🦅

vercel · 2026-09-08T07:41:41Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
suspensive-next-streaming-react-query	Ready	Preview	Sep 8, 2026 7:45am UTC
v2.suspensive.org	Ready	Preview	Sep 8, 2026 7:45am UTC
v3.suspensive.org	Ready	Preview	Sep 8, 2026 7:45am UTC
visualization.suspensive.org	Ready	Preview	Sep 8, 2026 7:45am UTC

Copilot

🟡 Changes recommended

The new default type permits arbitrary props through direct calls and structural assignments.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review details

Files reviewed: 11/11 changed files
Comments generated: 5
Review effort level: Balanced

  {
    displayName: 'ClientOnly',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(


  {
    displayName: 'Delay',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(


    displayName: 'ErrorBoundary',
    with: <
-      TProps extends ComponentProps<ComponentType> = Record<string, never>,
+      TProps extends ComponentProps<ComponentType> = Record<never, never>,


  {
    displayName: 'ErrorBoundaryGroup',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(


manudeli · 2026-09-08T07:49:56Z

  {
    displayName: 'Suspense',
-    with: <TProps extends ComponentProps<ComponentType> = Record<string, never>>(
+    with: <TProps extends ComponentProps<ComponentType> = Record<never, never>>(


@copilot Do we should refer https://github.com/bvaughn/react-error-boundary/blob/main/lib/utils/withErrorBoundary.ts ? cc. @geongyu09

@manudeli Thanks for the reference link. I agree with your idea!

As Copilot pointed out, Record<never, never> collapses to {}, so while JSX still rejects <Wrapped foo="bar" />, both Wrapped({ foo: 'bar' }) and const props: ComponentProps<typeof Wrapped> = { foo: 'bar' } pass type checking.
The type tests I added only cover JSX, which is why I missed this.

Personally, I think following the withErrorBoundary approach is the better option, and not only because of the key issue.
While prototyping it on Suspense.with (forwardRef<ComponentRef<TComponent>, ComponentProps<TComponent>> + createElement(Component, { ...props, ref })), I found that the current implementation doesn't forward refs on React 18.
The types accept ref (since it's inferred from the wrapped component's props), but at runtime ref.current stays null and React logs the "Function components cannot be given refs" warning.
It only works on React 19 because ref is a regular prop there.
Verified with react-dom 18.3.1 and 19.2.6:

Current implementation forwardRef implementation

React 18 ref.current === null + warning Attached correctly

React 19 Attached correctly Attached correctly

// Types pass, but on React 18 ref.current is null at runtime (with the "Function components cannot be given refs" warning) import { createRef, forwardRef } from 'react' const Inner = forwardRef<HTMLDivElement, { text: string }>(({ text }, ref) => <div ref={ref}>{text}</div>) const WrappedInner = Suspense.with({ fallback: null }, Inner) const ref = createRef<HTMLDivElement>() const el = <WrappedInner ref={ref} text="t" /> // no type error

To be fair, I'm not sure whether the missing ref support on React 18 should count as a bug, since I'm not deeply familiar with the library's design decisions.
But given that the library supports ^18 || ^19, it seems likely to confuse users.
Switching to the forwardRef version also resolves the key issue and makes the non-JSX paths strict as well.
So I think it's worth fixing.

That said, this change feels out of scope for the current PR.

Here's my proposal:

Keep this PR minimal: change the default to Attributes and add the non-JSX negative tests Copilot suggested.

In a follow-up PR, switch with on all five components to a forwardRef-based implementation and add ref-forwarding tests for both React 18 and 19.

Would you be fine with this approach, or would you prefer doing everything in this PR? Happy to go either way!

fix(react): allow key attribute on components created by with

ab6648c

geongyu09 requested review from kangju2000 and manudeli as code owners August 24, 2026 15:23

github-actions Bot added the @suspensive/react label Aug 24, 2026

gwansikk assigned geongyu09 Aug 25, 2026

manudeli requested a balanced review from Copilot September 5, 2026 01:26

Copilot started reviewing on behalf of manudeli September 5, 2026 01:27 View session

Copilot AI reviewed Sep 5, 2026

View reviewed changes

manudeli added 2 commits September 5, 2026 10:53

Merge branch 'main' into fix/with-key-attribute

5d341a9

Merge branch 'main' into fix/with-key-attribute

fa70671

manudeli requested review from gwansikk and a balanced review from Copilot September 8, 2026 07:40

Copilot started reviewing on behalf of manudeli September 8, 2026 07:41 View session

manudeli approved these changes Sep 8, 2026

View reviewed changes

vercel Bot deployed to Preview – visualization.suspensive.org September 8, 2026 07:42 View deployment

vercel Bot deployed to Preview – suspensive-next-streaming-react-query September 8, 2026 07:42 View deployment

Copilot AI reviewed Sep 8, 2026

View reviewed changes

vercel Bot deployed to Preview – v2.suspensive.org September 8, 2026 07:44 View deployment

vercel Bot deployed to Preview – v3.suspensive.org September 8, 2026 07:45 View deployment

Navigation Menu

Uh oh!

fix(react): allow key attribute on components created by with - #1981

fix(react): allow key attribute on components created by with#1981
geongyu09 wants to merge 3 commits into
toss:mainfrom
geongyu09:fix/with-key-attribute

geongyu09 commented Aug 24, 2026

Uh oh!

coauthors Bot commented Aug 24, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Aug 24, 2026

Uh oh!

changeset-bot Bot commented Aug 24, 2026 •

edited

Loading

Uh oh!

codecov-commenter commented Aug 25, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

manudeli left a comment

Uh oh!

vercel Bot commented Sep 8, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

manudeli Sep 8, 2026

Uh oh!

geongyu09 Sep 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	Current implementation	forwardRef implementation
React 18	`ref.current === null` + warning	Attached correctly
React 19	Attached correctly	Attached correctly

Uh oh!

Conversation

geongyu09 commented Aug 24, 2026

Overview

Cause

Fix

Tests

PR Checklist

Uh oh!

coauthors Bot commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

People can be co-author:

Uh oh!

vercel Bot commented Aug 24, 2026

Uh oh!

changeset-bot Bot commented Aug 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codecov-commenter commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟢 Approval recommended

Uh oh!

manudeli left a comment

Choose a reason for hiding this comment

Uh oh!

vercel Bot commented Sep 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

manudeli Sep 8, 2026

Choose a reason for hiding this comment

Uh oh!

geongyu09 Sep 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coauthors Bot commented Aug 24, 2026 •

edited

Loading

changeset-bot Bot commented Aug 24, 2026 •

edited

Loading

codecov-commenter commented Aug 25, 2026 •

edited

Loading

vercel Bot commented Sep 8, 2026 •

edited

Loading