Antes de começar, precisamos entender alguns conceitos importantes:

O que é uma thread: Uma thread é como uma sequência de execução. Você pode pensar em uma thread como um conjunto de instruções a serem executadas pela CPU. Uma thread é um componente de um processo.

O que é um processo: Um processo é um programa em execução. Por exemplo, o navegador que você está usando para ler este artigo é um processo.

Cada processo tem uma ou mais threads. E um programa pode ser composto por muitos processos. No exemplo acima, você consegue ver que o Safari está utilizando 48 threads. Processos em um único programa são chamados de processos filhos. Um programa que usa vários processos é chamado de multiprocessado.

Single-threaded

Single-threaded significa que um processo é projetado para ter apenas uma thread de execução. Isso significa que apenas um conjunto de instruções é executado de cada vez.

Por exemplo, imagine que você tem um aplicativo simples. Ele é projetado para calcular o resultado de uma série de equações matemáticas. Neste caso:

• passo 0: (5+5)-(10–4)

Como um programa single-threaded, o programa só pode executar uma instrução por vez. Uma instrução única é uma declaração de adição ou subtração. Do início ao fim, a avaliação desse programa pela CPU seria assim:

• passo 0: (5+5)-(10–4)

• passo 1: (10)-(10–4)

• passo 2: 10-(6)

• passo 3: 4

Multi-threaded

Multi-threaded significa que um processo tem duas ou mais threads. Portanto, pode executar várias instruções simultaneamente.

Como um programa multi-threaded, várias instruções podem ser executadas ao mesmo tempo. Vamos fingir que este programa tem duas threads. Assim, o programa pode executar duas instruções de cada vez. Do início ao fim, a avaliação desse programa pela CPU seria assim:

• passo 0: (5+5)-(10–4)

• passo 1: (10)-(6) // Observe que tanto as etapas 5+5 quanto 10–4 foram realizadas durante a mesma etapa.

• passo 2: 4

React Native é single-threaded

Isso significa que, para cada processo, há apenas uma thread. Agora, no exemplo acima, você pode se perguntar por que o React Native seria single-threaded em vez de multi-threaded. Afinal, o multi-threading realiza o cálculo em menos passos (ou seja, mais rápido), então deve ser melhor, certo?

Bom, alguns motivos pelos quais o React Native utiliza o single-thread são:

1. Simplicidade de Design:

   • O design single-threaded simplifica a arquitetura e torna mais fácil para os desenvolvedores entenderem e depurarem o código. Isso é especialmente benéfico para criar uma estrutura que seja acessível a uma ampla gama de desenvolvedores.

2. Facilidade de Manutenção:

   • Manter um modelo de execução single-threaded pode simplificar a manutenção do código-fonte, pois há menos complexidade em lidar com problemas relacionados a concorrência e sincronização de threads.

3. Estabilidade e Consistência:

   • O modelo single-threaded pode ajudar a evitar alguns tipos de erros relacionados a condições de corrida e outros problemas de concorrência que poderiam surgir em um ambiente multi-threaded. Isso contribui para uma experiência de desenvolvimento mais estável.

4. Compatibilidade com Plataformas:

   • Algumas plataformas subjacentes, como iOS e Android, têm suas próprias abordagens específicas para multithreading. Manter o React Native single-threaded permite uma integração mais harmoniosa com essas plataformas.

5. Performance Adequada para Muitos Casos de Uso:

   • Embora o modelo single-threaded tenha suas limitações em termos de aproveitar totalmente o poder de processadores modernos, ele ainda é adequado para muitos casos de uso típicos em desenvolvimento móvel.

É importante notar também que, embora o React Native seja single-threaded, ainda é possível realizar operações assíncronas e paralelas usando conceitos como Promises, async/await e Web Workers. Essas abstrações permitem que parte do trabalho seja executada de forma assíncrona, proporcionando uma experiência mais responsiva ao usuário, mesmo em um ambiente single-threaded.

React Native é multiprocessado

Em vez de executar várias threads, o React Native executa vários processos. Três processos principais são executados no React Native e um processo que só roda no Android L (5.0).

• UI Thread: Este processo é usado para lidar com a renderização de visualizações android e ios.

• JS Thread: Este processo é usado para lidar com toda a lógica da sua aplicação React Native.

• React Native Modules Thread: Isso acontece quando um aplicativo precisa acessar uma API de plataforma. Por exemplo, se estiver trabalhando com animações, pode usar o driver nativo para lidar com suas animações.

• React Native Render Thread: O Android L (5.0) usa isso apenas para desenhar a interface do usuário com o OpenGL.

No React Native, cada processo tem apenas uma thread. Infelizmente, por causa disso, as pessoas frequentemente usam os termos de forma intercambiável.

Depuração de processos e threads no React Native

Ao entender esses três processos principais no React Native (JS Thread, UI Thread e React Native Modules Thread), você pode compreender melhor por que ocorrem problemas de desempenho no React Native. Problemas comuns incluem:

• Animações bloqueando o JS Thread.

• Transições de navegação lentas durante timeouts ou animações.

• Cálculos caros ou grandes dados causando lentidão.

• Gargalo durante a lógica de montagem de componentes.

Você pode resolver muitos problemas de animação usando o React Native Modules Thread em vez do JS Thread. A API Animada do React Native permite configurar suas animações com useNativeDriver: true, para que a animação não bloqueie o principal JS Thread.

Você também pode usar o React Native Interaction Manager para corrigir ações concorrentes (como animação e navegação, por exemplo) que causam problemas de desempenho, agendando uma ação para começar somente após a conclusão da outra.

É importante notar que a interação entre essas threads é facilitada pela ponte (bridge). A JS Thread se comunica com a React Native Thread por meio dessa ponte.