Skip to content

Profiler flamegraph could show icon/emoji for the re-render reasons. Making it easier to scan. #18014

Closed
@bgirard

Description

@bgirard

Right now when working on a large project/component tree it can be difficult to understand why a large subtree is re-rendering. You click on each component and a reason: 1) Re-rendered because of the parent, 2) Re-rendered because a property changed, 3) Re-rendered because a hook changed. We don't get notified if a context value changed but ideally we would in the future.

If the flamegraph added icons we could perhaps spot patterns and more quickly identify what's going on when a large tree re-renders. For example state is changed (📚) at the top causing components to re-render via props (📋). Here's an example

📚Parent View
📋 TabStrip
📋 Page
📚Content
📋 Story

Here we can quickly spot that the state is changing in two component, and 3 components are changing because of prop. That might focus the investigation into why the state of Parent View / Content are changing which are likely causing the other props to change.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions