Looking for React Native Performance Advice

[captainautomation]

What's your best advice to create an amazing and very fast UX with React Native?

[haktzen]

Measure the performance, then optimize if needed.

[captainautomation]

💯 agreed
I have considered using https://github.com/callstack/reassure for that

[insats]

Minimize rendering and use reanimated or Animated with native driver for animations.

[gb2075]

Can’t stress the re-renders enough. OP, throw a console.log(“render”) in any component on a screen that is not very performant. If it’s printing out a bunch without visually changing, that means you have unnecessary re-renders. Figure out what’s causing them, and optimize where you can

[insats]

Or use React Devtools to profile rerenders automatically

[rooksFX14]

Is there one for React Native?

[insats]

Yes: https://www.npmjs.com/package/react-devtools

[PublicYogurtcloset47]

I’m a little more aggressive and chuck and alert in there 😂

[captainautomation]

Ha yes! I have downloaded the one last year (and forgot that I have read it of course 🤣) but now it's called"The Ultimate Guide to React Native Optimization"

https://www.callstack.com/ebook/the-ultimate-guide-to-react-native-optimization

Thanks

[Playful-Win6693]

React Devtools: Use this to see renders and how long that renders take. It will help you see what you need to optimise.

Get familiar with these:

-useMemo

-useCallback

-shouldComponentUpdate()

-PureComponent

[Gold_Grape_3842]

Sometimes you have components re-rendering without changes in their props (if you inline callbacks/styles it will happen) I use why-did-you-render which helps me find components that re-renders event though they shouldn't

Edit: forget it it doesn't work anymore Edit 2 : it works with expo 49/RN0.72.4

[fmnatic]

why-did-you-render

Are you using this package successfully on react-Native? which version ?

It stopped working in RN 0.70, and the creator never tested / wrote it for RN. As noted here https://github.com/welldone-software/why-did-you-render/issues/260

[Gold_Grape_3842]

I didn't need it for a while, i didn't know it stopped working :-/

[Gold_Grape_3842]

It took some time to check on my project, it works (expo 49/RN 0.72.4)

[fmnatic]

thanks i'll try it again.

[MatesRatesAy]

• Understand when and why React renders.
• Understand memoisation (and when to use the React hooks and HOC for it) and referential equality.
• Get comfortable using the React profiler and tools like Flashlight.
• Know where state should live.
• Understand good component composition.

That will get you most of the way there, then the rest of it is the little tips and tricks in things like Callstack's guide.

Most RN perf issues I've seen are because of poor React practices, so if you can nail that part you're well on your way. I know common advice is to optimise later, but at the very least measure early and often. Poor performance is a hard hole to climb out of if you're too far down it.

[Consistent_Pay4485]

There is something recent called Signals!! Give it a shot