Handling threads in React Native and Data Flux - Deepstash
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.

2

STASHED IN:

5

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

Handling threads in React Native and Data Flux

📱 React Native

STASHED IN:

5 Comments

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...

1

STASHED IN:

5

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

1

STASHED IN:

5

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...

2

STASHED IN:

5

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. Ren...

2

STASHED IN:

5

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 ...

1

STASHED IN:

5

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 netw...

2

STASHED IN:

5

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP: