Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Props to child component don't update on revalidate #50873

Closed
1 task done
mkaufmann84 opened this issue Jun 6, 2023 · 2 comments
Closed
1 task done

Props to child component don't update on revalidate #50873

mkaufmann84 opened this issue Jun 6, 2023 · 2 comments
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. locked Pages Router Related to Pages Router.

Comments

@mkaufmann84
Copy link

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: 20.2.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.5-canary.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

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

App directory (appDir: true), Data fetching (gS(S)P, getInitialProps)

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

https://app.replay.io/recording/ticker-dashboard--ba167277-e90b-492e-8a23-91c4c619a264

To Reproduce

You get data in a server component.
You display the data in the server component
You pass the data to a client component through a prop, which is displayed in client component
You make change to data
You revalidate with revalidatePath or router.refresh()
You observe data was only updated when rendered in server component.

Describe the Bug

Revalidating the data causes a re-render of server component. However, props passed to client component are not apart of this re-render.

export default async function Manage() {
  var fund = await getFund();
  return (
    <div>
     //This data is updated on revalidate
      {JSON.stringify(fund!.partners)}

     //the data here is not updated on revalidate
      <ManageTable rows={fund!.partners} />
    </div>
  );

Expected Behavior

The props to be accurate in the child component.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@mkaufmann84 mkaufmann84 added the bug Issue was opened via the bug report template. label Jun 6, 2023
@github-actions github-actions bot added area: app App directory (appDir: true) Pages Router Related to Pages Router. labels Jun 6, 2023
@mkaufmann84
Copy link
Author

There was a mistake in my client code. Adding the prop as a dependency to useEffect fixed it.

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template. locked Pages Router Related to Pages Router.
Projects
None yet
Development

No branches or pull requests

1 participant