Skip to content

React Context causes infinite re-render loop in page component marked as async #51528

Open
@JGH153

Description

@JGH153

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.4.7-canary.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/JGH153/next-13-app-context-bug

To Reproduce

  1. Clone project
  2. npm install & npm run dev
  3. Open http://localhost:3000/
  4. Click on URL to about page
  5. Click on button

Describe the Bug

Using context in page components causes infinite re-renders when updating context value if marked as async.

This works:
export default function About() {

This causes infinite re-renders on context update:
export default async function About() {

Both are maked as "use client";

Expected Behavior

Should not cause the tab to freeze in an infinite re-render loop, or provide a warning/error that "use client" and async should not be used together in the same page component with context

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions