Skip to content

notes.md

Latest commit

 

History

History
98 lines (60 loc) · 3.96 KB

notes.md

File metadata and controls

98 lines (60 loc) · 3.96 KB

Research notes

Quick concepts

  • Implemented since [email protected]
  • Needs ReactDevTools plugin in Chrome
  • Collects timing information abpout each component that is rendered in order to identify performance bottlenecks in React applications.
  • In the future will be fully compatible with "time-slicing" and "suspense".

Access & usage

Open Chrome dev tools" > React > Profiler

Access

Press the record button to start profiling any interaction. Once you're done, just stop recording.

Stop profiling

Reading data

Conceptually, React works in two phases:

  • Render: determine the changes that need to be made on the DOM. React calls the "render()" method and compares the result to the previous render.
  • Commit: apply the changes. Is when React inserts, updates and removes DOM nodes. Also calls this two lifecycle methods: componentDidMount() and componentDidUpdate()

Commits bar

Devtools groups the recorded performance info by commit in a bar near the top right of the profiler.

commits bar

  • Each bar represents a single react commit.
  • The color and height of each bar represents how long the commit took to render.
    • Longer render: tall and yellow bars.
    • Shorter render: short and blue bars.

You can also filter the commits. It's helpful for long profiling.

  • Show native elements: shows html native elements & react components.
  • Hide commits below (number): shows commits

Flame chart

The flamechart view represents the state of the application for a particular React commit.

  • Each bar respresents a component (Input, Result, Hit, etc)

  • The width and color represents how long took the component and its childs to render.

    • Width: how long took the component (and its children) to render when they last rendered. The wider the component, the longer took to render.

    • Color: time spent of the component (and its children) as to render in the current commit.

      • Yellow components took more time.
      • Blue components took less time.
      • Gray components did not render at all during the commit.

TODO: not clear enough, at least for me.

Flame chart example

Ranked chart

Represents a single commit. Each bar shown in the chart is a React component (SearchBox, Results, Hit, etc.). The component is ordered from the longest to render (top) to the shortest (bottom).

Ranked chart example

Component chart

Useful to see how many times a single component was rendered. Each bar represents its render time in a single commit.

The color and height of each bar corresponds to how long the component took to render relative to other components in a particular commit.

Component chart example

Interactions

React recently added another experimental API to track the cause of an update. Each row represents an interaction that was traced. The colored dots along the row represent commits that were related to that interaction.

Interactions example

Resources