WhoBuilt

You can go EVERYWHERE but I can go FAST - performance case study

Sep 21, 2022· 22 min· 689 views·Watch on YouTube

Speaker

Jakub Binda, a software developer at Callstack, presents React Native performance case studies at React Native EU 2022, using a car analogy to explain how to balance app speed and flexibility.

Reduce bundle weight

Binda recommends removing dead or legacy code, avoiding large bundled JSON files such as translations, and removing or replacing unused third-party libraries. In one project, reducing the bundle from 28 MB to about 15 MB improved download time by 26%, execution time by 10%, and time to interactive by about 13%.

Lighten expensive components

Components should use fewer device resources and render only as often as needed. Profiling showed a shimmer component took 132 ms because its library included unused logic; replacing it with lighter primitives reduced render time to 36 ms and simplified its structure.

Find and prevent unnecessary renders

Binda uses Flipper flame charts to spot slow component structures and unexpected renders. In one case, moving internal state higher in the component tree cut the structure from 38 components to 20 and prevented three extra renders. In another, changing how a Hook-driven prop was passed stopped off-screen FlatList rows from re-rendering; average JS FPS rose from 37 to 55, and the performance score increased from 80 to 95.

Measure production performance and choose a balance

For meaningful measurements, Binda recommends using release builds for both the native app and the JavaScript bundle, since development and mixed build setups can distort results. He argues that improving an existing app can be costly, so teams should balance flexibility with the speed users need. His measurement advice is to establish a baseline, use a reliable method, and combine a broad view with attention to details.

Takeaways

  • Remove unused code and heavy dependencies to reduce bundle size and startup work.
  • Profile components before optimizing; replace abstractions that add unused logic.
  • Use Flipper traces to find unnecessary renders, including in off-screen list rows.
  • Compare against a baseline and validate performance with release builds.
  • Balance speed with flexibility, and consider performance early in app architecture.

Mentioned in this talk

Search inside this talk

What was claimed 6

  • role at
    Jakub Binda is software developer at Callstack Team
    “I’m a software developer at Callstack”
    YouTube
    Unverified1 source· Talk
  • metric
    Jakub Binda: Reduced bundle size from 28 MB to around 15 MB; download time improved 26%, execution time 10%, and TTI around 13%
    “reduce the bundle size from 28 megabytes to around 15”
    YouTube
    Unverified1 source· Talk
  • feature
    Flipper: Profiling tool with flame charts for investigating application components
    “I started profiling the application with the Flipper profiling tool and got a flame chart”
    YouTube
    Unverified1 source· Talk
  • metric
    Jakub Binda: Reduced shimmer render time from 132 ms to 36 ms
    “The final render time was 36 milliseconds, four times better than before”
    YouTube
    Unverified1 source· Talk
  • metric
    React Native Performance Monitor: Before the change: performance score 80 and average 37 JS FPS; after: score 95 and average 55 JS FPS
    “before my change, the performance score was 80 points, with 37 average JS FPS. After the change ... 95 points, and there were 55 JS FPS on average”
    YouTube
    Unverified1 source· Talk
  • integrates with
    “another cool feature included in Flipper, which is called the React Native Performance Monitor plugin”
    YouTube
    Unverified1 source· Talk

Related talks

You can go EVERYWHERE but I can go FAST - performance case study, Jakub Binda · WhoBuilt