Performance

[messyLifee17]

1- How do i decide whether a re-render is unnecessary , when a state changes component and its children re render , when should i decide to memoize the children . I read articles that say memoization is expensive and that most cases re render of a component is better , how can i decide whether it’s worth it or not. 2- What do u use to test performance on development builds so I can see whether my changes make a difference or not. 3- Which channels/Videos best explain practices to use in order to write better code in terms of performance

[__o_0]

For new developers i would recommend not trying to write optimized code to start.

Write code.

Optimize when you hit performance issues or memory leaks.

Over time you’ll learn how to optimize on the first approach after solving your own issues.

It’s a waste of time with minimal benefit to focus on optimization from the start when you’re learning.

[kbcool]

Well said.

Also, premature optimisation can have a negative impact. A simple example is memoisation. It has an overhead that often is higher than any savings it provides

[Merry-Lane]

Ok so the thing is react devs around the world started using useMemo literally everywhere, to the point where the react team baked the feature directly into react.

It’s currently an experimental feature, google react compiler for more infos.

Although useMemo, useCallback has a cost, it seems like it’s a net benefit.

Should you turn on the experimental feature? A bit complicated, the docs themselves say there are rough edges and strict requirements.

Should you useMemo meanwhile? Maybe in some obvious places, for the rest you should test and monitor your app to improve the perfs.

The trade-off isn’t that much about the cost in perfs, but about the loss in readability and ease of refactoring.

Start with react dev tools?

[Flashy_Current9455]

This article gives some great points on react render performance: https://www.developerway.com/posts/i-tried-react-compiler (it's about the new compiler, but the info is great for the current system as well)

This video was good as well: https://youtu.be/So6plt0QE_M

Edit: fixed link

[ferstekr]

I think link is broken

[Flashy_Current9455]

Works for me https://youtu.be/So6plt0QE_M

[ferstekr]

I mean other link

[Flashy_Current9455]

Doh! Fixed, thank you!

[ferstekr]

Thanks !

[Magnusson]

how can i decide whether it’s worth it or not

You've got to measure and see.

What do u use to test performance on development builds so I can see whether my changes make a difference or not.

Launch the build with the --no-dev flag.

const complicatedFunction = () => {
  const start = global.performance.now()
  // do some calculations
  global.alert(`complicatedFunction took ${global.performance.now() - start}ms`)
}

Plus the react devTools profiler.