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

fix(runtime-core): avoid infinite loop rendering caused by setting props multiple times #3384

Closed
wants to merge 1 commit into from
Closed

fix(runtime-core): avoid infinite loop rendering caused by setting props multiple times #3384

wants to merge 1 commit into from

Conversation

HcySunYang
Copy link
Member

Fix: #3371

I made a minimal reproduction https://codesandbox.io/s/vigilant-euler-7q6j0?file=/src/index.ts. Open the link and check the comments in the code

  1. The Parent component accesses the props of the Child component and is tracked by the Child component's props.
  2. When rendering the Child component, the Child component modifies the reactivity data of the Parent component.
  3. The Parent component re-rendering and checks whether the Child component needs to be updated.
  4. Child component needs to be updated, and set the full props
  5. For the props.foo, it needs to be cast to a boolean value
  6. So the props.foo been modified twice, once is set to the empty string, and another is set to a boolean value. here and here

@@ -274,6 +274,7 @@ function setFullProps(
attrs: Data
) {
const [options, needCastKeys] = instance.propsOptions
const rawCurrentProps = extend({}, toRaw(props))
if (rawProps) {
for (const key in rawProps) {
const value = rawProps[key]
Copy link
Member

@edison1105 edison1105 Mar 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this will be better

   for (const key in rawProps) {
      // key, ref are reserved and never passed down
      if (isReservedProp(key)) {
        continue
      }

      const value = rawProps[key]
	 //...
    }

@HcySunYang HcySunYang added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Mar 19, 2021
@HcySunYang HcySunYang added ❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels May 8, 2021
@yyx990803 yyx990803 closed this in 0255be2 May 24, 2021
@@ -370,7 +370,12 @@ function setFullProps(
)
}
}

if (options) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds two additional object key enumerations each call which is not ideal - I managed to avoid them in 0255be2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❗ p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Getting recursive updates error when adding boolean prop without ="true"
3 participants