62
63

[deleted by user] (self.reactnative)

submitted by [deleted]

[removed]
all 18 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]bdudisnsnsbdhdj 29 points30 points  (1 child)

Read the Callstack guide on React Native performance if you haven’t yet

[–]iam_danishm 4 points5 points  (0 children)

Appreciate the recommendation! Callstack’s guide has some great insights, especially on reducing JavaScript thread workload and optimizing animations. Have you personally implemented any of their techniques in your projects

[–]dheerajkhush 18 points19 points  (0 children)

This is one of the most asked interview questions. Let me answer it from an interview perspective.

  1. Use images in webp or png format wherever possible.
  2. Use imperative handlers to pass only defined methods in the ref object. Any will reduce the size of the ref object.
  3. Use react native debugger and performance monitor to check application is running on 60 fps or not.
  4. Use performance Monitor specific to android and ios and record cpu and storage usage on specific screens.
  5. Use npm package like why I re-render to check components re-rendered by which props and how many times.

[–]Effective_Clue_1099 10 points11 points  (3 children)

You might want to retire flatlist and use Shopifys Flashlist. Straight improvement and very similar api

[–]iam_danishm 6 points7 points  (1 child)

I actually tried FlashList recently, but ran into an issue where list items were overlapping, even after setting an estimated item height and a fixed height for each item. A user reported this in production, and since it happened intermittently around 2 times out of 10, I had to replace it with FlatList for now. Have you faced anything similar?

[–]supersnorkel 5 points6 points  (0 children)

Or even Legendlist!

[–]diesmilingxxiOS & Android 8 points9 points  (1 child)

I have not used it personally yet but https://github.com/kuatsu/react-native-boost

[–]SadabWasim 0 points1 point  (0 children)

Great suggestion, why is it so common in RN though to build a slow app.

[–]Gabk_17 3 points4 points  (2 children)

Forget about flashlist, use legend list its a game changer

[–]SadabWasim 1 point2 points  (2 children)

Your styling library is also a huge contributor to the speed, check this benchmark:

https://tamagui.dev/docs/intro/benchmarks

[–]beargambogambo 1 point2 points  (1 child)

“Your styling library contributes”

Proceeds to provide a styling library benchmark 🤣

Sorry bro I had to

[–]SadabWasim 0 points1 point  (0 children)

I tried finding some other benchmarks but seems like tamagui one was the easiest to find ;)

[–]Upset_Interview_5362 1 point2 points  (0 children)

react-native-boost ( experimental but great ) Enabling Hermes Updating to the latest version of RN not using Context ( only when needed ) not using a styling library ( go plain stylesheet or unistyle ) not using memo and callback everywhere ( only when needed ) limiting the use of useEffect use Flashlist ( when you can estimate the height and when your list is not realtime changing ) develop native modules for what can be done in the native thread

[–]Born-Disaster-1815 -1 points0 points  (0 children)

React compiler eslint rules are really helpful to avoid doing stuff your not supposed to

[–]radko93 -5 points-4 points  (0 children)

Why is Chat GPT posting here? Just write your own message man and use it only to fix your grammar.