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)
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
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.
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.
I did not get which is preforming better: functional components or class components. What should I use for long lists
Most helpful comment
Thats expected if rendering
TreeNodeComponent
is expensive.React.PureComponent
bails out early if props haven't changed.Are you saying that going from a class extending
React.Component
to a function component caused a performance regression? Or were you already usingReact.PureComponent
(orshouldComponentUpdate
)You can use
React.memo
to get the same bailout semantics with function components.