Desempenho e depuração com modo React Strict: guia

Ao longo dos anos, o ReactJS passou por muitas mudanças, introduzindo novos recursos e descontinuando os antigos. No momento da redação deste artigo, a versão atual do React é 18.2.0.

Alguns novos recursos significativos que foram introduzidos no React da versão 16 a 18 são: –

• Reescrita da arquitetura de fibra do React: É feita uma reescrita completa do algoritmo principal do React, o que melhora o desempenho e também permite novos recursos, como renderização assíncrona e limites de erro
• Adição de nova API de contexto: Uma nova API foi adicionada para passar dados pela árvore de componentes sem precisar passar acessórios manualmente
• Introdução aos limites de erro: É introduzido um novo recurso que permite lidar com erros normalmente em seus componentes
• Mudanças no ciclo de vida do React: Vários métodos de ciclo de vida foram descontinuados em favor de novos métodos, como componentWillMount -> UNSAFE_componentWillMount
• Introdução aos ganchos React: É introduzida uma nova maneira de escrever lógica com estado em componentes funcionais que facilita a reutilização e o teste de código
• Adição do modo React Strict: Foi introduzido um novo recurso chamado 'modo estrito' que ajuda a identificar padrões obsoletos em seu código e também fornece feedback sem afetar a construção de produção
• Adição de renderização no lado do servidor (SSR): Foi adicionado um novo recurso que permite que o React seja renderizado no lado do servidor para melhorar o desempenho e SEO
• Introdução de novos recursos como Suspense, Concurrency, Automatic Batching, etc.

O “Modo React Strict” é uma espécie de recurso de depuração passiva introduzido em 2018 em Reagir versão 16.3 para ajudá-lo a escrever um código React melhor.

Neste artigo discutiremos a necessidade do 'Modo React Strict'; quão diferente é o 'Modo React Strict' das técnicas de tratamento e depuração de exceções; recursos e benefícios do uso do 'Modo React Strict' em seus projetos de software React.

Introdução

O 'Modo Estrito' no React ajuda os desenvolvedores a aderir às práticas de codificação mais recentes, identificando padrões obsoletos e fornecendo feedback durante o desenvolvimento.

Ao usar o 'Modo React Strict' você pode detectar possíveis problemas no início do processo de desenvolvimento, realizando verificações e avisos adicionais que não são feitos na construção de produção.

O 'Modo React Strict' destaca o uso de métodos de ciclo de vida inseguros, identifica efeitos colaterais e detecta erros e avisos que podem passar despercebidos durante o desenvolvimento.

Além disso, o 'Modo React Strict' incentiva o uso de padrões recomendados e práticas recomendadas, levando a um código mais limpo e de fácil manutenção.

O 'Modo React Strict' ajuda você a escrever um código React melhor, detectando alguns dos problemas mencionados abaixo: –

• Detectando métodos de ciclo de vida inseguros: O React Strict Mode destaca o uso de métodos de ciclo de vida inseguros, como componentWillMount e componentWillUpdate , que são propensos a causar bugs e estão obsoletos em versões mais recentes do React.
• Identificando efeitos colaterais: O React Strict Mode avisa sobre componentes que apresentam efeitos colaterais fora da renderização, como modificação de variáveis ​​globais ou manipulação direta do DOM.
• Destacando problemas do tipo prop: O React Strict Mode ajuda a detectar possíveis problemas com tipos de prop, como quando um componente recebe um tipo de dados incorreto para um prop.
• Capturando erros e avisos: O React Strict Mode permite verificações adicionais que ajudam a detectar erros e avisos que, de outra forma, poderiam passar despercebidos durante o desenvolvimento.
• Incentivar as melhores práticas: O uso do React Strict Mode incentiva você a adotar as melhores práticas e seguir os padrões recomendados, levando a um código mais limpo e de fácil manutenção.

Portanto, ao destacar os problemas acima e avisos sobre práticas de código obsoletas, o 'Modo React Strict' ajuda a identificar e corrigir possíveis problemas no início do ciclo de desenvolvimento, permitindo que você escreva código React de melhor qualidade e mais estável.

Vamos ver um exemplo de como usar o 'Modo React Strict'.

Exemplo

Suponha que temos um componente React simples que renderiza um botão e um contador: –

import React, { useState } from 'react';

function Counter  {
  const (count, setCount) = useState(0);

  const handleClick =   => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default Counter;

Para usar o “Modo React Strict”, podemos simplesmente agrupar o componente em um componente : –

import React, { useState } from 'react';

function Counter  {
  const (count, setCount) = useState(0);

  const handleClick =   => {
    setCount(count + 1);
  };

  return (
    <React.StrictMode>
      <div>
        <button onClick={handleClick}>Click me</button>
        <p>Count: {count}</p>
      </div>
    </React.StrictMode>
  );
}

export default Counter;

Agora, suponha que queiramos usar a variável de estado count em um gancho useEffect para executar um efeito colateral quando o componente for montado. Podemos modificar o componente da seguinte forma: –

import React, { useState, useEffect } from 'react';

function Counter  {
  const (count, setCount) = useState(0);

  const handleClick =   => {
    setCount(count + 1);
  };

  useEffect(  => {
    console.log(`Component mounted with count: ${count}`);
  }, (count));

  return (
    <React.StrictMode>
      <div>
        <button onClick={handleClick}>Click me</button>
        <p>Count: {count}</p>
      </div>
    </React.StrictMode>
  );
}

export default Counter;

Quando salvamos e recarregamos o componente no navegador, devemos ver um aviso no console que diz: –

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Este aviso é produzido porque estamos realizando uma atualização de estado durante uma fase de renderização. Para consertar isso, podemos simplesmente mover a instrução console.log para uma função separada e chamá-la no gancho useEffect:

import React, { useState, useEffect } from 'react';

function Counter  {
  const (count, setCount) = useState(0);

  const handleClick =   => {
    setCount(count + 1);
  };

  const logCount =   => {
    console.log(`Component mounted with count: ${count}`);
  };

  useEffect(  => {
    logCount ;
  },  );

  return (
    <React.StrictMode>
      <div>
        <button onClick={handleClick}>Click me</button>
        <p>Count: {count}</p>
      </div>
    </React.StrictMode>
  );
}

export default Counter;

Agora, ao recarregarmos o componente no navegador, o aviso deverá desaparecer e a instrução console.log deverá ser executada corretamente quando o componente for montado.

O modo React Strict é semelhante ao Javascript 'Use Strict'?

Não, 'React Strict Mode' não é semelhante ao 'use strict' do Javascript, no entanto, ambos foram desenvolvidos com uma intenção semelhante, que é fornecer uma ferramenta para ajudar os desenvolvedores a melhorar a qualidade e a capacidade de manutenção de seu código React.

Aqui está uma tabela de comparação entre 'React Strict Mode' e 'JavaScript usar estrito':-

O modo React Strict funciona como um depurador?

Não, 'React Strict Mode' não é um depurador.

Um depurador é usado para percorrer o código e identificar problemas específicos durante o tempo de execução, enquanto o 'Modo React Strict' é usado durante o desenvolvimento para evitar que possíveis problemas ocorram em primeiro lugar.

Eu pessoalmente uso o 'React Strict Mode' e o Debugger porque ambos se complementam e devem ser usados ​​em combinação com outras ferramentas de desenvolvimento, como Ferramentas do navegadore práticas para qualidade, capacidade de manutenção e eficiência ideais do código.

Abaixo está uma tabela de comparação comparando o 'Modo React Strict' e o Debugger para destacar as diferenças comuns entre os dois: –

O modo React Strict é uma técnica de tratamento de exceções?

Não, o React Strict Mode não é uma técnica de tratamento de exceções; no entanto, ambos são usados ​​para identificar e prevenir possíveis problemas em um código React.

O tratamento de exceções é uma técnica usada por programadores de software para detectar erros e eventos inesperados que podem ocorrer durante a execução do programa.

Aqui está um pequeno exemplo de tratamento de exceções no ReactJS: –

Exemplo

import React, { useState } from 'react';
function Example  {
  const (count, setCount) = useState(0);
  const handleIncrement =   => {
    try {
      if (count >= 10) {
        throw new Error('Maximum limit reached!');
      }
      setCount(count + 1);
    } catch (error) {
      console.error(error.message);
    }
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}


export default Example;

No tratamento de exceções no exemplo React acima, temos um componente React simples que usa o gancho useState para gerenciar um estado de contagem. O componente também possui um botão que incrementa o estado da contagem quando clicado. No entanto, adicionamos um bloco try-catch na função handleIncrement para lidar com exceções.

No bloco try, verificamos se o estado da contagem já está no valor máximo de 10. Se estiver, lançamos um novo erro com a mensagem 'Limite máximo atingido!'. Se a contagem for menor que 10, simplesmente atualizamos o estado da contagem usando a função setCount.

No bloco catch, capturamos qualquer erro gerado no bloco try e registramos a mensagem de erro no console usando console.error.

Dessa forma, se um erro for lançado no bloco try, o bloco catch irá tratá-lo e registrar a mensagem de erro no console sem travar o aplicativo.

O mesmo exemplo acima também pode ser escrito usando o modo React Strict e o bloco Try and Catch. Aqui está abaixo: –

import React, { useState } from 'react';

function Example  {
  const (count, setCount) = useState(0);
  const handleIncrement =   => {
    try {
      if (count >= 10) {
        throw new Error('Maximum limit reached!');
      }
      setCount(count + 1);
    } catch (error) {
      console.error(error.message);
    }
  };
  return (
    <React.StrictMode>
      <div>
        <p>Count: {count}</p>
        <button onClick={handleIncrement}>Increment</button>
      </div>
    </React.StrictMode>
  );
}

export default Example;

No exemplo acima, envolvemos nosso componente dentro do componente React.StrictMode para ativar o modo estrito. Os blocos try-and-catch permanecem os mesmos do exemplo anterior, mas agora quaisquer avisos ou erros detectados pelo modo estrito serão exibidos no console.

Como já sabemos que o React Strict Mode irá detectar qualquer problema ou bug potencial em nosso código durante o desenvolvimento, portanto, neste exemplo, ele nos ajuda a identificar qualquer problema relacionado ao uso do gancho useState e garantir que nosso código esteja seguindo as melhores práticas.

Quais são os melhores recursos do React Strict Mode?

Enquanto trabalhava no desenvolvimento de um novo recurso 'Renderização assíncrona' a ser lançado na versão 16 do React, a equipe de desenvolvimento do React aprendeu algumas lições, como ciclos de vida de componentes legados que encorajavam práticas de codificação inseguras. Esses ciclos de vida foram: –

• componenteWillMount
• componenteWillReceiveProps
• componenteWillUpdate

Assim, o componente React Strict Mode, também conhecido como , foi escrito para detectar e alertar sobre métodos de ciclo de vida inseguros.

Gradualmente, mais recursos, como avisos sobre APIs obsoletas, etc., foram adicionados para o benefício do desenvolvedor, ajudando-o a escrever um código preparado para o futuro e também garantindo que o código seja compatível com as versões mais recentes do ReactJS.

Abaixo estão os 6 recursos mais atraentes do React Strict Mode: –

Detectando métodos de ciclo de vida inseguros

Os componentes React possuem vários métodos de ciclo de vida, como componentDidMount e componentWillUnmount, que são invocados durante vários estágios do ciclo de vida do componente.

Alguns desses métodos de ciclo de vida foram descontinuados ou removidos da versão 16.3 do React em diante devido à sua tendência de encorajar práticas de codificação inseguras.

O 'Modo React Strict' ajuda a detectar esses métodos de ciclo de vida inseguros e avisa sobre o uso deles em seu código.

Ao detectar e eliminar métodos de ciclo de vida inseguros, você pode garantir que seu código seja mais robusto e preparado para o futuro.

Os métodos de ciclo de vida inseguros mais comuns que podem causar desempenho, confiabilidade e facilidade de manutenção no React são: –

• componentWillMount – Este método é chamado logo antes de um componente ser montado no DOM. É considerado inseguro porque pode causar problemas na renderização do servidor e levar a inconsistências entre a renderização do servidor e do lado do cliente.
• componentWillReceiveProps – Este método é chamado quando um componente recebe novos adereços. É considerado inseguro porque pode levar à nova renderização desnecessária de componentes e causar problemas de desempenho.
• componentWillUpdate – Este método é chamado imediatamente antes da atualização de um componente. É considerado inseguro porque pode causar problemas na renderização do servidor e levar a inconsistências entre a renderização do servidor e do lado do cliente.
• shouldComponentUpdate – Este método é chamado antes da atualização de um componente e determina se o componente deve ou não ser atualizado. É considerado inseguro porque pode causar problemas de desempenho, principalmente quando usado de forma inadequada.
• componentWillUnmount – Este método é chamado logo antes de um componente ser removido do DOM. É considerado inseguro porque pode causar vazamentos de memória e outros problemas se não for tratado corretamente.

Destacando APIs obsoletas

O React está em constante evolução e algumas APIs que eram recomendadas anteriormente estão agora obsoletas.

Portanto, se você usar essas APIs obsoletas em seu código React, elas poderão levar seu código a possíveis problemas e bugs que você nunca desejaria como um desenvolvedor React cuidadoso.

O 'Modo React Strict' ajuda a identificar e destacar essas APIs obsoletas em seu código, incentivando você a atualizar seu código para usar as APIs mais recentes e recomendadas.

Identificando potenciais efeitos colaterais

No React, um efeito colateral é qualquer ação que ocorre fora do componente, como fazer uma solicitação de API ou atualizar a localização do navegador.

Os efeitos colaterais podem levar a comportamentos inesperados e bugs em seu código.

O 'Modo React Strict' ajuda a identificar possíveis efeitos colaterais em seus componentes e avisa sobre eles.

O exemplo que lemos na seção de introdução deste artigo identifica um efeito colateral potencial e nos emite um aviso para corrigi-lo.

Aviso sobre o uso da API Legacy String Ref

Se você se lembra, nas versões anteriores do React, você usava string refs para referenciar os elementos DOM.

No entanto, a API string ref foi descontinuada em favor da API ref de retorno de chamada, no React versão 16, portanto, usar a API string ref pode levar a comportamentos inesperados e bugs em seu código.

'React Strict Mode' avisa sobre o uso da API ref de string herdada e incentiva você a atualizar seu código React para usar a API ref de retorno de chamada mais recente, conforme mostrado em um exemplo de código abaixo:-

Exemplo

Este exemplo mostra um componente React usando uma API ref simples com o componente React.StrictMode e nos avisando que estamos usando uma API legada.

import React, { useRef } from 'react';

function MyComponent  {
  const inputRef="myInput";

  const handleButtonClick =   => {
    console.log(this.refs(inputRef).value);
  };

  return (
    <React.StrictMode>
      <div>
        <input type="text" ref={inputRef} />
        <button onClick={handleButtonClick}>Log input value</button>
      </div>
    </React.StrictMode>
  );
}

O aviso que recebemos é: –

Warning: A string ref, "myInput", has been used in MyComponent. This pattern is a legacy practice and is not recommended in modern React applications. Instead, use the callback ref API introduced with React 16 and higher. Learn more about using refs safely here: 

O componente atualizado usando a API de referência de retorno de chamada é: –

import React, { useRef } from 'react';

function MyComponent  {
  const inputRef = useRef(null);

  const handleButtonClick =   => {
    console.log(inputRef.current.value);
  };

  return (
    <React.StrictMode>
      <div>
        <input type="text" ref={inputRef} />
        <button onClick={handleButtonClick}>Log input value</button>
      </div>
    </React.StrictMode>
  );
}

Aviso sobre o uso da API de contexto legado

'React Strict Mode' a partir da versão 18 avisa sobre o uso da API Legacy Context em seu código React, solicitando que você atualize para uma versão mais recente da API Context.

A nova API Context é mais poderosa e fácil de usar, além de oferecer melhor desempenho e escalabilidade.

React.StrictMode detecta o uso da API Legacy Context verificando certos padrões no código, como acessar a propriedade de contexto de um componente ou passar um objeto como um valor de contexto.

Aviso sobre o uso obsoleto de findDOMNode

React.StrictMode avisa sobre o uso obsoleto de findDOMNode verificando chamadas para este método no código.

Isso ocorre porque findDOMNode pode causar problemas de desempenho e geralmente é desencorajado em aplicativos React modernos.

A abordagem alternativa para usar findDOMNode é usar o atributo ref para criar uma referência a um elemento DOM e, em seguida, manipular o elemento DOM usando a referência.

Vamos ver um exemplo de código como abaixo: –

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef ;
  }

  handleButtonClick  {
    console.log(this.inputRef.current.value);
  }

  render  {
    return (
      <React.StrictMode>
        <div>
          <input type="text" ref={this.inputRef} />
          <button onClick={  => this.handleButtonClick }>Log input value</button>
        </div>
      </React.StrictMode>
    );
  }
}

No exemplo acima, criamos uma referência ao elemento de entrada usando o atributo ref e createRef . Podemos então acessar o valor do elemento de entrada usando a propriedade atual do objeto ref.

Usar o atributo ref em vez de findDOMNode é uma maneira mais moderna e eficiente de manipular o DOM no React e é recomendado pelo React.StrictMode.

Identificando problemas relacionados à arquitetura de desmontagem e remontagem do React v18

No React v18, um novo comportamento de modo estrito foi introduzido para desmontar e remontar.

Com esse novo comportamento, cada elemento é desmontado e remontado exatamente com o mesmo estado e efeitos de quando foi inicialmente montado.

O processo de montagem e remontagem de um elemento usando o comportamento antigo é o seguinte: –

• O elemento é inicialmente montado.
• Efeitos colaterais são gerados.
• O modo estrito agora emula a remoção desses efeitos.
• Quando o componente é montado novamente, os mesmos efeitos colaterais são aplicados.

Essa antiga arquitetura de desmontagem e remontagem pode apresentar alguns problemas potenciais, como nova renderização não intencional de componentes ou efeitos colaterais inesperados. O 'Modo React Strict' ajuda a detectar esses problemas executando componentes em um modo de desenvolvimento mais estrito.

Vamos ver como podemos usar o React Strict Mode com esta nova arquitetura de desmontagem e remontagem: –

import React, { useState } from 'react';

function Counter  {
  const (count, setCount) = useState(0);

  return (
    <React.StrictMode>
      <div>
        <h1>Count: {count}</h1>
        <button onClick={  => setCount(count + 1)}>Increment</button>
      </div>
    </React.StrictMode>
  );
}

export default Counter;

Melhorando a experiência de desenvolvimento e promovendo as melhores práticas

O 'Modo React Strict' ajuda a melhorar a experiência de desenvolvimento, detectando possíveis problemas e bugs no início do processo de desenvolvimento e garantindo que seu código seja mais robusto e preparado para o futuro.

Resumo

Como desenvolvedor React, você pode usar o 'Modo React Strict' para detectar possíveis problemas antecipadamente e escrever um código melhor.

Ele detecta métodos de ciclo de vida inseguros, alerta sobre APIs obsoletas, identifica possíveis efeitos colaterais e promove práticas recomendadas que ajudam você a melhorar sua experiência de desenvolvimento.

O modo estrito no React não é uma ferramenta de depuração, mas pode evitar que problemas sejam implantados na produção, fornecendo verificações e avisos adicionais.

Se você gostou disso, não deixe de conferir nossos outros artigos sobre React.

• Mais de 24 bibliotecas de componentes de UI React
• React vs Backbone.js: Qual é o melhor para o seu projeto?
• Reagir WebSockets: Tutorial
• Um guia abrangente para renderização do lado do servidor no React
• Svelte Vs React: o que é melhor

Perguntas frequentes

O que é o modo React Strict?

Modo estrito de reação é uma ferramenta do React que ajuda a identificar possíveis problemas em uma aplicação. Ele não renderiza nenhuma UI visível, mas ativa verificações e avisos adicionais para seus descendentes. Essas verificações são executadas apenas no modo de desenvolvimento e não afetam a construção de produção.

Qual é o uso do modo estrito em JavaScript?

O modo estrito do JavaScript é uma forma de optar por uma variante restrita do JavaScript, com o objetivo de corrigir erros que afetam as otimizações dos mecanismos JavaScript e proibir a sintaxe que provavelmente será definida em versões futuras do ECMAScript. Isto aumenta a segurança do código evitando erros comuns, como declarações acidentais de variáveis ​​globais, e tornando o código mais eficiente ao desabilitar recursos que tornam o mecanismo JavaScript mais lento.