If you are a developer, you know that one
of our ever longing questions is: how could I make this faster? More optimized? Seeking good performance in React Native has
always been the key to a successful app. In today’s video, let’s see how you can
optimize your application by freezing your screens.
Before we get to what freezing means, here’s
the situation. You have this app that does quite a few things,
one of them being messaging. At the top, you have an icon that shows the
number of unread messages, and when you tap on it, you see the list of conversations.
Now on this screen, we can see what each discussion's
last message is, if it’s unread, etc. Lastly, when you go into that conversation,
you see all the messages with that person. Now, look at it this way: as I’m sending
messages, what happens on the other screens?
Well, quite a few things actually. First, the list of conversations will update
the last message, and go from unread to read. We might also get more messages coming in
from different people, which will reorder the list and so on.
Also, on the home screen, that little message
counter will update as well. The interesting part is: if I’m staying
in this conversation, I will never see these updates. And yet, they’re still happening in the
background. To some extent, the performance loss could
be huge if a lot is happening in your app.
So how could we improve this?
Well, imagine if the screens we don’t see
could be frozen. Basically, what if we could pause all the
screens that the user isn’t facing right now, and only show the screen's final state
when they’re facing it again. Doing so, the updates would still happen,
yet the components wouldn’t re-render as long as they’re in that frozen state. This
means no more unnecessary reconciliation and view updates on the React side of things.
Now that you get the picture and why it’s
a boost for your app, let me tell you more about this new library called react-freeze. It was created by Krzysztof Magiera, famously
working on Reanimated, and more at Software Mansion. The way react-freeze works is by using the
React Suspense API to prevent frozen components from re-render. What this means, is that react-freeze wraps
your component and all its children with Suspense, and then finds a way to pause the component
when the freeze property is set to true. The way it does it is by starting a Promise
that will never resolve until the component is unfrozen again. Basically, as long as a Promise is running,
React Suspense will think that something is happening. And while this is running, Suspense will stop
future re-renders and show a default placeholder instead. In other words, react-freeze creates a Promise
that will never resolve until we change the freeze property to false. When unfrozen, the Promise is resolved, and
Suspense shows the component again. When this is applied to the realm of navigation,
this all makes perfect sense. Going back to the screens I showed you earlier,
they can now easily be frozen according to what screen the user is currently facing.
So if we're inside a conversation, freeze
the home page and maybe even the list of conversations, until we go back to them. You can already start using the new feature
in the well-known react-navigation library for React Native. All you need is to have react-native-screens
installed, and add enableFreeze() at the top of your main app file. That’s it, as magical as it sounds, your
screens will now be frozen automatically when they aren't necessary.
I find this new performance boost very interesting
and I’d be happy to hear your thoughts in the comments below. Alright, it feels good to be back. Thanks for watching, and see you next time.
