Reconciliation performance function vs. class components

[thomasnordquist]

Do you want to request a feature or report a bug?
neither/bug

What is the current behavior?
While migrating class components to function components (with hooks), I noticed a significant performance drop. I have a component (called TreeNodeComponent) which is part of a tree-structure. Depending on the tree size, hundreds of instance could be visible.

Wrapping the function component in a PureComponent significantly reduced the observed "render time". (From ~160ms to ~60ms)

"Render time", observed in Chrome Dev Tools

Context:

The App renders hundreds of these TreeNodeComponent in a tree-structure. When a parent is updated, all direct children need to be reconciled.
Project: https://github.com/thomasnordquist/MQTT-Explorer

What is the expected behavior?
Comparable performance between functional and class components.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

OSX
Chromium 73 / Electron 5.0.5
React 16.8
Typescript & Webpack

[aweary]

Wrapping the function component in a PureComponent significantly reduced the observed "render time". (From ~160ms to ~60ms)

Thats expected if rendering TreeNodeComponent is expensive. React.PureComponent bails out early if props haven't changed.

While migrating class components to function components (with hooks), I noticed a significant performance drop.

Are you saying that going from a class extending React.Component to a function component caused a performance regression? Or were you already using React.PureComponent (or shouldComponentUpdate)

You can use React.memo to get the same bailout semantics with function components.

[thomasnordquist]

I migrated from a React.Component with shouldComponentUpdate.

I use React.useMemo to avoid "rendering".
React.memo yields results as good as those from PureComponent. (~50-60ms)

Thanks a lot for clarifying.

[themisir]

I did not get which is preforming better: functional components or class components. What should I use for long lists