Testing on Older Devices

Testing on older and less powerful devices

Can be a really humbling experience.
Most of the work I do in React native is built on iOS simulator first.

I love Android even on a high end machine the emulator is often slow or buggy and the remote device control feature leaves a lot to be desired.

It slows me down.

Most of the time, there isn't much difference.
However.... every once and a while things don't go my way!

Introducing - Charts.

There's a few things working together against me here:

1. There's a lot of data to draw in each chart
2. There's multiple charts on the screen
3. The "activity" area is already quite complex
4. I'm stuck using a React native chart library which renders using the UI thread
5. RN debug mode adds additional render lag

It worked perfectly on iOS, but Android - was a mess.
Screens would take ages to load and scrolling was worse than a slideshow.

To solve it, I had to:

• Refactor the whole area...
• Make better use of startTransition
• Split the Life logs area into memoised components (this was tech debt I omitted during building)
• Build an underlying cache layer, which combines log measurement data
• Split my data into chunks with lazy loading per screen
• Spread the data evenly, so instead of rendering 200 points per chart, we render 20.
• Introduce Legend List (more performant)
• Introduce pagination on scroll

It's taken a few days to solve but now on a 6 year old phone in debug mode it's silky smooth.

Thanks for reading!