Handling threads in React Native and Data Flux - Deepstash
Handling threads in React Native and Data Flux

Handling threads in React Native and Data Flux

Keep reading for FREE

Intro

Intro

Thread. You can think of a thread as a set of instructions to be executed by the CPU. A thread is a component of a process.

Process. A process is a program that is running. For example, the browser (perhaps Google Chrome, Safari, or Firefox) you are using to view this article is a process.

7

102 reads

One Application - Multiple Processes

One Application - Multiple Processes

Every process has one or more threads. And a program can actually be made up of many processes. In the example above, you’ll notice that it says Google Chrome (44). This means that Google Chrome is actually running 44 different processes. Processes in a single program are referred to as child processes. A program that uses multiple processes is referred to as multi-processed.

6

17 reads

Single-Threaded vs Multi-Threaded

Single-threaded means that a process is designed to have only one thread of execution. This means only one set of instructions executes at once.

Multi-threaded means that a process has two or more threads. So it can execute multiple instructions simultaneously.

As a multi-threaded program, several instructions can run at a time. Let’s pretend this program has two threads. So, the program can run two instructions at a time.

6

25 reads

React Native is Single-Threaded

Because React Native is single-threaded, if you have a process that has many responsibilities, you can have performance problems. Imagine you have a process responsible for rendering a video on the screen and a live feed of comments on the video. The video rendering could block the live feed from updating correctly, or the live feed could cause stuttering in the video.

6

26 reads

React Native is Multi-Processed

React Native is Multi-Processed

Instead of running multiple threads, React Native runs multiple processes. 3 main processes run in React Native. (Even if they are called threads)

  1. UI Thread
  2. JS Thread
  3. Render Thread / Shadow Tree

6

31 reads

Problem With Animations

Problem With Animations

If animation run on JS Thread then for each frame the JS Thread will send serialized data on Bridge to the UI Thread. This will result in something similar with real life traffic jam where we have the bridge and the cars(code for each frame).

In addition of this imagine also doing a network request and a dispatch for global state, the JS Thread would be more busy resulting in even more lag.

A very good solution for running animations on UI Thread is react-native-reanimated which also give the opportunity to run any piece of JS code, not only animations.

6

15 reads

Solution Animation + Data Flow

Solution Animation + Data Flow

Imagine having a like animation and a counter. When the like is pressed the counter should increment.

A person using the interface doesn’t know about how data flux is designed, what is a network request. The person just expects the heart to be colored immediately.

As React Native is single-threaded, the best approach is to run animation on UI Thread(color the icon + update the counter) and only when the animation is finished run on JS Thread the rest of the work as updating state and sending a network request. In this way the counter is not waiting for request, the whole interaction is on UI.

6

43 reads

CURATED BY

sabin

Building @deepstash

TL;DR how threading is working in React Native and the solution of handling data flux for a like button and its counter

MORE LIKE THIS

Testing · React Native

Testing · React Native

Testing · React Native

reactnative.dev

Why Discord is Sticking with React Native

Why Discord is Sticking with React Native

Why Discord is Sticking with React Native

blog.discord.com

Ready for the next level?

Read Like a Pro

stash-superman-illustration

Explore the World’s

Best Ideas

200,000+ ideas on pretty much any topic. Created by the smartest people around & well-organized so you can explore at will.

An Idea for Everything

Explore the biggest library of insights. And we've infused it with powerful filtering tools so you can easily find what you need.

Knowledge Library

Powerful Saving & Organizational Tools

Save ideas for later reading, for personalized stashes, or for remembering it later.

# Personal Growth

Take Your Ideas

Anywhere

Organize your ideas & listen on the go. And with Pro, there are no limits.

Listen on the go

Just press play and we take care of the words.

Never worry about spotty connections

No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.

Get Organized with Stashes

Ideas for your next work project? Quotes that inspire you? Put them in the right place so you never lose them.

Join

2 Million Stashers

4.8

Stars

5,740 Reviews

App Store

4.7

Stars

72,690 Reviews

Google Play

samz905

Don’t look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.

Ashley Anthony

This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!

Sean Green

Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.

Shankul Varada

Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.

Jamyson Haug

Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.

Laetitia Berton

I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!

Giovanna Scalzone

Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.

Ghazala Begum

Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

FAQ

Claim Your Limited Offer

Get Deepstash Pro

BLACK FRIDAY

75% OFF | 1-Year Pro Subscription

Claim Offer