Skip to content

Can createElement be optimized for performance? #27216

@zackasaurus

Description

@zackasaurus

For large complex apps that have many props and a deep react DOM tree, createElement is one of the most expensive operations.

I've noticed for large complex apps such as Facebook and Discord, createElement can take up 10% of the memory allocation during a basic scenario, and it can take up 2-5% of the script time, not accounting for MajorGC and MinorGC.

The issue is that the props object in createElement gets created from scratch, and the entire config that's passed in gets iterated over. Since the config object isn't used anymore after createElement, it gets marked for GC, which additionally hurts performance.

I have an idea where we can just simply assign props to config for most cases, such as when the props object is not frozen, and no key or ref was passed in to createElement. I can create a PR, but I wanted to run it by the react devs first to see if there is anything I'm missing.

Facebook

Screenshot 2023-08-11 at 11 25 34 AM Screenshot 2023-08-11 at 11 25 43 AM Screenshot 2023-08-11 at 11 24 49 AM

Discord

Screenshot 2023-08-11 at 11 17 39 AM Screenshot 2023-08-11 at 11 17 57 AM

Activity

github-actions

github-actions commented on Apr 7, 2024

@github-actions

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

sophiebits

sophiebits commented on Apr 11, 2024

@sophiebits
Collaborator

Thanks for filing this! This helped kick-start the work to get #28768 and friends landed for real. Hopefully you will see even larger gains from that set of changes once theyโ€™re released (note theyโ€™re still behind a feature flag on main for now).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Resolution: StaleAutomatically closed due to inactivity

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @sophiebits@zackasaurus

        Issue actions

          Can createElement be optimized for performance? ยท Issue #27216 ยท facebook/react