Manipulando o hook useState

Davi Borges Seares — Fri, 24 May 2024 15:36:51 +0000

Quando você trabalha com o hook useState do React, há situações em que é melhor usar uma função para atualizar o estado com base no estado anterior, em vez de defini-lo diretamente. Aqui estão os motivos:

Manipulação de Atualizações de Estado Assíncronas

O React agrupa atualizações de estado para melhorar o desempenho. Quando você define o estado diretamente, pode não estar trabalhando com o valor mais atual do estado devido à natureza assíncrona das atualizações de estado. Usando uma função, você garante que está trabalhando com o valor mais recente do estado.

Exemplo:

setCount(prevCount => prevCount + 1);

Neste exemplo, prevCount é garantido ser o valor mais recente do estado, garantindo que a operação de incremento seja precisa.

2. Lidando com Múltiplas Atualizações de Estado

Se você tem múltiplas atualizações de estado que dependem do estado anterior, usar uma função ajuda a evitar problemas potenciais. Sem isso, as atualizações podem sobrescrever umas às outras.

Exemplo:

const handleIncrement = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
}

Aqui, count será corretamente incrementado em 2, porque cada função de atualização obtém o estado mais recente.

3. Evitando Estado Obsoleto

Usar o estado anterior garante que você evite problemas de estado obsoleto, que podem ocorrer se o estado for atualizado com base em um valor desatualizado.

Exemplo:

const handleUpdate = () => {
  setCount(count + 1);  // Pode usar estado obsoleto
}

Se count não for o valor mais recente, o incremento pode não funcionar como esperado.

4. Atualizações Funcionais em Lógica de Estado Complexa

Quando a lógica de atualização do seu estado é complexa, usar a função do estado anterior pode simplificar a implementação e tornar o código mais legível.

Exemplo:

setState(prevState => {
  // lógica complexa usando prevState
  return newState;
});

Dessa forma, você define claramente como o novo estado depende do estado anterior, tornando o código mais fácil de manter.

Resumo

Atualizações assíncronas: Garante que você sempre trabalhe com o estado mais recente.
Múltiplas atualizações: Evita que as atualizações de estado sobrescrevam umas às outras.
Evitar estado obsoleto: Previne bugs relacionados a valores desatualizados do estado.
Lógica complexa: Simplifica e clarifica as atualizações de estado.

Usar uma função para atualizar o estado com base no estado anterior é uma prática robusta no React, que ajuda a gerenciar o estado de forma mais previsível e evita problemas comuns.

Setup Detox em aplicações React Native

Davi Borges Seares — Tue, 05 Apr 2022 20:09:12 +0000

Em setembro do ano passado a Rocketseat lançou um Code/drops#101 ensinando a configurar e rodar testes no React Native usando detox. Porém o tutorial que é feito lá não contempla o iIOS, apenas o android. Por isso decidir documentar o setup passo a passo para que você consiga de maneira fácil, rodar testes e2e tanto no android quanto no iIOS. Bora?

Repositório com a aplicação no github: codedrop-teste2e

Ambiente

Na raiz do seu terminal, instale o detox-cli globalmente

 npm install -g detox-cli

Na raiz do seu projeto, instale o detox e o jest como dependências de desenvolvimento

 yarn add detox jest -D

Android

1. Na pasta Android > build.gradle

Dentro de repositories, adicione o bloco maven.

allprojects {
    repositories {
                ...
                // adicione apenas o bloco maven abaixo
        maven {
            // Add to detox
            url "$rootDir/../node_modules/detox/Detox-android"
        }
    }
}

2. Na pasta Android > App > build.gradle

Adicione as novas dependências necessárias para rodar os testes no android

android {
    defaultConfig {
                ...
        // Novas dependencias para rodar os testes.
        testBuildType System.getProperty('testBuildType', 'debug')
        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
    }
}

No mesmo arquivo, adicione:

dependencies {
        // Novas dependencias para rodar os testes.
    androidTestImplementation('com.wix:detox:+') { transitive = true }
    androidTestImplementation 'junit:junit:4.12'
}

4. Setup de teste no Android

Agora, vamos criar um arquivo chamado DetoxTest.java no seguinte caminho:
android/app/src/androidTest/java/com/[nome_do_package]/DetoxTest.java

package com.package; // Trocar pelo no do Projeto.

import com.wix.detox.Detox;
import com.wix.detox.config.DetoxConfig;

import org.junit.Rule;
import org.junit.Test;
import org.junit.runner.RunWith;

import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.filters.LargeTest;
import androidx.test.rule.ActivityTestRule;

@RunWith(AndroidJUnit4.class)
@LargeTest
public class DetoxTest {
    @Rule
    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);

    @Test
    public void runDetoxTests() {
        DetoxConfig detoxConfig = new DetoxConfig();
        detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
        detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
        detoxConfig.rnContextLoadTimeoutSec = (com.package.BuildConfig.DEBUG ? 180 : 60);

        Detox.runTests(mActivityRule, detoxConfig);
    }
}

iOS

Instale o brew na raiz do terminal, então:

brew tap wix/brew
brew install applesimutils

Setup detox

Iniciando com detox

yarn detox init -r jest

Atualizando o arquivo .detoxrc.json

{
  "testRunner": "jest",
  "runnerConfig": "e2e/config.json",
  "configurations": {
    "android.emu.debug": {
      "type": "android.emulator",
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk",
      "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug && cd ..",
      "device": {
        "avdName": "Pixel_5_API_31" // your avd-name here
      }
    },
    "ios.sim.debug": {
      "type": "ios.simulator",
      "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/yourProject.app",
      "build": "xcodebuild -workspace ios/yourProject.xcworkspace -scheme yourProject -sdk iphonesimulator -derivedDataPath ios/Build",
      "device": {
        "type": "iPhone 11"
      }
    }
  },
}

Gerando a build para teste

No Android:
yarn detox build -c android.emu.debug

No iOS:
yarn detox build -c ios.sim.debug

Executando testes com Detox

No Android:
yarn detox test -c android.emu.debug

No iOS:
yarn detox test -c ios.sim.debug

🚨 xcode problems 🚨

Caso você tenha um problema no build ios, tente mudar o caminho da pasta build conforme a imagem abaixo.

No menu do xcode acesse files > xcoworkspace settings > Advanced > Custom.

DEV Community: Davi Borges Seares

Manipulando o hook useState

Manipulação de Atualizações de Estado Assíncronas

2. Lidando com Múltiplas Atualizações de Estado

3. Evitando Estado Obsoleto

4. Atualizações Funcionais em Lógica de Estado Complexa

Resumo

Setup Detox em aplicações React Native

Ambiente

Android

1. Na pasta Android > build.gradle

2. Na pasta Android > App > build.gradle

4. Setup de teste no Android

iOS

Setup detox

Gerando a build para teste

Executando testes com Detox

🚨 xcode problems 🚨