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

perf: optimize createUpgradableConstructor #4092

Merged
merged 1 commit into from Mar 22, 2024

Conversation

nolanlawson
Copy link
Contributor

Details

This optimizes createUpgradableConstructor and thus improves the dom-light-styled-component-create-1k-different benchmark by 6-7%:

Screenshot 2024-03-21 at 4 01 59 PM

The main optimization is to avoid creating the same class with the same methods/constructor over and over, and to instead just extend a base class.

Does this pull request introduce a breaking change?

  • 😮‍💨 No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

  • 🤞 No, it does not introduce an observable change.

@nolanlawson nolanlawson requested a review from a team as a code owner March 21, 2024 23:04
// Perf optimization - the vast majority of components have formAssociated=false,
// so we can skip the setter in those cases, since undefined works the same as false.
// @ts-expect-error type-mismatch
UpgradableConstructor.formAssociated = isFormAssociated;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This optimization (avoiding setting formAssociated) is tiny compared to the extends optimization, but it still exists. I measured the benefit from this change alone at ~1%:

Screenshot 2024-03-21 at 3 51 47 PM

`<${tagName}> was already registered with formAssociated=${UpgradableConstructor.formAssociated}. It cannot be re-registered with formAssociated=${isFormAssociated}. Please rename your component to have a different name than <${tagName}>`
);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is not a perf optimization – I just felt it was odd to have this logic inside of the try/finally, since it doesn't strictly need to be there. 🙂

Note that the UpgradableConstructor.formAssociated now has to be cast to a Boolean because it may be undefined.

callback(this);
}
};
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This class is basically hoisted unmodified from the old UpgradableConstructor. The only difference is that it's missing the formAssociated, which has to be different per-class.

Copy link
Member

@jmsjtu jmsjtu left a comment

Choose a reason for hiding this comment

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

Nice!

@nolanlawson nolanlawson merged commit 998e5d5 into master Mar 22, 2024
9 checks passed
@nolanlawson nolanlawson deleted the nolan/optimize-create-upgradable-constructor branch March 22, 2024 15:45
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 this pull request may close these issues.

None yet

2 participants