A better design pattern for instant feedback in React Native
Part of the Achieving 100ms Series.
1. The Status Quo
The current generally used design pattern to show a loading indicator when a button is pressed is to define an isLoading state, and simply set it to true when the button is pressed, and false once the workload has finished. Much like in this simplified example.
At first glance, this is a really good solution, but let’s see what can happen in practice.
What???
This is puzzling because setIsLoading(true) is set as the first action in the press event handler. So how can this be?
Even though the status change is the first line, React waits for the function to finish executing before actually committing and rendering the changes.
For the purpose of this example, I’ve obviously exaggerated the workForASecond function, but a scaled down situation can happen in apps with a lot of moving parts and background activities (like a chat app, or a forum).
You can easily find yourself in situations where the JS thread experiences a few dropped frames, and thus gives users a sluggish experience if they press the button during that window.
2. Proposed Design Pattern for Instant Feedback
How to make sure the sluggish experience does not happen, no matter how loaded the JS thread is at any given time?
If we view this transition as part of the button’s feedback animation (press in, press out, show loading indicator), then the solution becomes apparent right away.
Thanks to the team at Software Mansion who built the amazing Reanimated 2 library, we can now solve this kind of scenarios in ways it wasn’t really possible before.
Instead of storing the transition value isLoading as a React state, we can store it as a Reanimated SharedValue.
Leave your thoughts in the comments section
I look forward to hearing from you so we can tweak this paper together and land on a design pattern that the entire React Native community can benefit from.
