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

Problem with rendering child component on props changes #4279

Closed
coder4u opened this issue Feb 14, 2024 · 3 comments · Fixed by #4280
Closed

Problem with rendering child component on props changes #4279

coder4u opened this issue Feb 14, 2024 · 3 comments · Fixed by #4280

Comments

@coder4u
Copy link

coder4u commented Feb 14, 2024

Describe the bug
There was a problem with the rendering of components when updating props.
If you pass the state of a parent component as a prop to a child component, and then update the state in the parent component, the child component is not rerendered.

To Reproduce
Preact - https://codepen.io/coder4u/pen/YzgdQEL

React without rerender issue - https://codepen.io/coder4u/pen/qBvLXOy

Steps to reproduce the behavior:

  1. Go to pen.
  2. Open console.
  3. You will see that parent state not synced with child props in render methods.

Expected behavior
Child component must rerender when it props changed.

@coder4u coder4u changed the title Preact 10.19.4 - problem with rendering child component on props changes Problem with rendering child component on props changes Feb 14, 2024
@JoviDeCroock
Copy link
Member

JoviDeCroock commented Feb 14, 2024

Looks like this got broken between 10.18.1 and 10.18.2, wondering whether this contributed to it. Will investigate.

EDIT: this looks to be a timing issue as it's not really reproducible in our test suite 😅

@dmitrage
Copy link
Contributor

Did some debugging, maybe it could help.

When BrokenChild is rendered for the first time its vnode._original == 3 (++vnodeId).
After setState in BrokenChild.componentDidUpdate it increments to 4. Note that global vnodeId == 3 at this time.
When App component re-renders after setTimeout it creates a new vnode for BrokenChild with _original == 4 (++vnodeId).
Then rendering bails out because oldVNode._original == newVNode._original.

Before the mentioned change _original was changed on a temporary copy of the oldVNode but now it is changed on the newVNode.

@JoviDeCroock
Copy link
Member

Yeah, I got to a similar conclusion, we might just need to change the vnodeId back after diffing 😅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants