Renderização do React Force: tutorial completo

Como desenvolvedor, ao construir interfaces de usuário com uma biblioteca como React, lançado em 2013, o aplicativo poderá ficar mais lento à medida que se tornar mais complexo. O React renderiza novamente os componentes sempre que seu estado ou adereços mudam, mesmo que as mudanças sejam insignificantes ou irrelevantes. Isso pode fazer com que seu aplicativo desperdice recursos valiosos e causar atrasos desnecessários para seus usuários. Para resolver esse problema, é essencial explorar técnicas que possam ajudá-lo a implementar a re-renderização de uma forma que reduza significativamente o número de re-renderizações e melhore o desempenho do seu aplicativo React.

Neste artigo, vou me aprofundar na re-renderização forçada do React, que é uma forma de acionar a re-renderização de um componente manualmente. Também discutirei como implementar essa técnica em seu aplicativo React usando vários métodos, como mudanças de estado, alteração da chave de um componente e uso do método forceUpdate. Ao entender por que e quando você pode precisar dessa técnica, você pode usá-la para construir aplicativos React mais rápidos e eficientes que fornecem uma melhor experiência de usuário para seus usuários.

Vamos mergulhar!

O que é a re-renderização do React Force?

A re-renderização forçada de reação é uma técnica usada para forçar a re-renderização de um componente, mesmo quando não há alterações em seus adereços ou estado. Isto pode ser útil quando você deseja atualizar o componente com base em fatores externos que não estão diretamente relacionados ao estado interno do componente. Por exemplo, se você tiver um componente que exibe a hora atual, talvez você queira forçá-lo a renderizar novamente a cada segundo para atualizar a hora exibida.

Quando o React é renderizado novamente?

Vamos nos aprofundar um pouco mais e ver quando o React renderiza novamente um componente.

Como implementar a re-renderização forçada no React?

Existem várias maneiras de forçar a nova renderização de um componente no React. Vamos agora examinar algumas maneiras pelas quais podemos implementar re-renderizações forçadas no React.

Pré-requisitos

Para implementar o renderizador de reação forçada com êxito, você deve ter o seguinte:

• Node.js: A versão mais recente do Node.js em sua máquina.
• Um editor de código: Qualquer IDE que suporte React.
• Biblioteca de reação: A versão mais recente do React em sua máquina.

Atualizar o estado

No React, você pode forçar uma nova renderização de um componente atualizando seu estado. Aqui está um exemplo de trecho de código:

import React, { useState } from 'react';

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

function increment  {
setCount(count + 1);
}

function forceRerender  {
setCount(count);
}

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={forceRerender}>Force Rerender</button>
</div>
);
}

Neste exemplo, tenho um componente Counter que renderiza um valor de contagem e dois botões. A função increment atualiza o estado da contagem adicionando 1. A função forceRerender também atualiza o estado da contagem, mas define o valor para a contagem atual, efetivamente não fazendo nada. No entanto, como o estado mudou, o React renderizará novamente o componente e o valor da contagem será atualizado.

Use o método forceUpdate

Outra forma de forçar uma nova renderização no React é usando o método forceUpdate, disponível nos componentes da classe. Aqui está um exemplo de trecho de código:

import React, { Component } from 'react';

class MyComponent extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

increment  {
this.setState({ count: this.state.count + 1 });
}

forceRerender  {
this.forceUpdate ;
}

render  {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={  => this.increment }>Increment</button>
<button onClick={  => this.forceRerender }>Force Rerender</button>
</div>
);
}
}

Neste exemplo, tenho um componente da classe MyComponent que também renderiza um valor de contagem e dois botões. A função de incremento atualiza o estado de contagem adicionando 1. A função forceRerender chama o método forceUpdate para forçar uma nova renderização do componente. Este método deve ser menos usado, pois pode ser menos eficiente do que atualizar o estado e levar a novas renderizações desnecessárias.

Alterar a propriedade principal de um componente

Além disso, alterar a propriedade chave de um componente também pode acionar uma nova renderização no React. A propriedade key é um atributo especial que o React usa para identificar os elementos da lista e ajudar a otimizar as atualizações.

Aqui está um exemplo de trecho de código que demonstra como alterar a propriedade key de um componente filho pode acionar uma nova renderização:

import React, { useState } from 'react';

function List  {
  const (items, setItems) = useState(('apple', 'banana', 'cherry'));

  function shuffleItems  {
    const shuffled = (...items).sort(  => Math.random  - 0.5);
    setItems(shuffled);
  }

  return (
    <div>
      <button onClick={shuffleItems}>Shuffle Items</button>
      <ul>
        {items.map((item, index) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Neste exemplo, tenho um componente List que renderiza uma lista de itens e um botão para embaralhar os itens aleatoriamente. A propriedade key para cada item é definida como o próprio valor do item, o que significa que se a ordem dos itens mudar, o React renderizará novamente a lista.

Quando a função shuffleItems é chamada, ela cria uma nova matriz de itens embaralhando a matriz existente. Quando o novo array é definido como o estado, o componente List é renderizado novamente e o React detecta que a propriedade chave de cada item foi alterada. O React então atualiza a lista para refletir a nova ordem dos itens.

Alterar a propriedade key pode ser útil para acionar uma nova renderização quando os dados em um componente mudam, mas o estado não. No entanto, deve ser usado com cautela, pois alterar o suporte principal com muita frequência pode levar a novas renderizações desnecessárias e prejudicar o desempenho.

Quando usar a re-renderização do React Force?

Embora as re-renderizações forçadas possam ser úteis em certas situações, elas não devem ser usadas com frequência, pois podem ser menos eficientes do que deixar o React lidar com as atualizações automaticamente. Geralmente, é recomendado usar a nova renderização forçada somente quando necessário e considerar abordagens alternativas, como usar estado ou adereços para acionar atualizações.

Alguns casos de uso comuns para re-renderização do React Force incluem:

• Atualizar um componente com base em dados externos ou eventos que não estão diretamente relacionados ao estado ou às propriedades do componente.
• Acionar uma nova renderização de um componente atualizado por meio de uma biblioteca de terceiros ou código não React.
• Atualizando um componente que foi desmontado e remontado.

Otimizando sua nova renderização

Aqui estão algumas dicas para otimizar re-renderizações no React:

Use o método de ciclo de vida shouldComponentUpdate

Este método permite controlar quando um componente deve ser atualizado, retornando um valor booleano. Por padrão, shouldComponentUpdate retorna true, o que significa que um componente sempre será atualizado quando seu estado ou adereços mudarem. No entanto, você pode substituir esse método para implementar uma lógica personalizada que determina quando um componente deve ser atualizado. Por exemplo, se um componente só precisar ser atualizado se uma propriedade específica for alterada, você poderá comparar o valor da propriedade anterior com o novo valor da propriedade em shouldComponentUpdate e retornar false se eles forem iguais.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // compare the props and state of the current and next component
    // only return true if they are different
    return this.props.someProp !== nextProps.someProp   
          this.state.someState !== nextState.someState;
  }
  
  render  {
    return <div>{this.props.someProp}</div>;
  }
}

Use PureComponent ou React.memo

PureComponent é um componente React integrado que implementa shouldComponentUpdate com uma comparação superficial de adereços e estado. Isso significa que se os adereços e o estado de um PureComponent não tiverem sido alterados, ele não será renderizado novamente. React.memo é um componente de ordem superior que pode ser usado para otimizar componentes funcionais da mesma forma que PureComponent.

class MyPureComponent extends React.PureComponent {
  render  {
    return <div>{this.props.someProp}</div>;
  }
}

const MyMemoComponent = React.memo(function MyMemoComponent(props) {
  return <div>{props.someProp}</div>;
});

Evite atualizações de estado desnecessárias

A atualização do estado aciona uma nova renderização do componente. Portanto, você deve evitar atualizar o estado desnecessariamente. Por exemplo, se um componente exibir uma lista de itens e você só precisar atualizar a lista ao adicionar um novo item, evite chamar setState ao excluir ou atualizar um item.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      items:  
    };
  }
  
  handleAddItem = (item) => {
    this.setState(prevState => {
      return {items: (...prevState.items, item)};
    });
  }
  
  render  {
    return (
      <div>
        {this.state.items.map(item => <div key={item.id}>{item.name}</div>)}
        <button onClick={  => this.handleAddItem({id: 1, name: 'New Item'})}>Add Item</button>
      </div>
    );
  }
}

Use Key Prop para listas

Ao renderizar listas de componentes, o React usa a propriedade key para rastrear a identidade de cada componente. Se a chave de um componente for alterada, o React irá tratá-lo como um novo componente e renderizá-lo novamente. Portanto, você deve usar uma chave estável e exclusiva para cada componente da lista para evitar novas renderizações desnecessárias.

class MyComponent extends React.Component {
  render  {
    const items = ({id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}, {id: 3, name: 'Item 3'});
    
    return (
      <div>
        {items.map(item => <div key={item.id}>{item.name}</div>)}
      </div>
    );
  }
}

Use o retorno de chamada shouldUpdate em ganchos useMemo e useCallback

Os ganchos useMemo e useCallback podem ser usados ​​para memorizar o resultado de uma função ou cálculo. No entanto, por padrão, eles recalcularão o resultado em cada renderização. Você pode passar um segundo argumento para useMemo ou useCallback, uma matriz de dependências. O gancho só recomputará o resultado se uma dependência for alterada. Se você tiver cálculos caros, poderá usar o retorno de chamada shouldUpdate para implementar uma lógica personalizada que determina quando o cálculo deve ser atualizado.

function MyComponent(props) {
  const (count, setCount) = React.useState(0);
  
  const expensiveValue = React.useMemo(  => {
    // do some expensive computation here
    return count * 10;
  }, (count), (prev, next) => {
    // only update the computation if the count has increased by more than 5
    return (next - prev) > 5;
  });
  
  const handleClick = React.useCallback(  => {
    setCount(prevCount => prevCount + 1);
  },  );
  
  return (
    <div>
      <div>Count: {count}</div>
      <div>Expensive Value: {expensiveValue}</div>
      <button onClick={handleClick}>Increment Count</button>
    </div>
  );
}

Ao implementar essas otimizações, você pode reduzir o número de novas renderizações desnecessárias em seu aplicativo React e melhorar o desempenho. Estes são apenas exemplos; a implementação específica dependerá das necessidades do seu aplicativo.

Conclusão

Concluindo, a re-renderização é um conceito essencial no desenvolvimento do React, pois determina quando um componente deve ser atualizado em resposta a mudanças em seu estado ou adereços. O mecanismo DOM virtual e o processo de reconciliação do React são projetados para serem eficientes e otimizados para desempenho, facilitando a construção de aplicativos rápidos e responsivos.

No entanto, às vezes pode ser necessário forçar uma nova renderização para atualizar a IU quando ocorrem determinados eventos. Neste artigo, exploramos alguns métodos que você pode usar para forçar uma nova renderização no React, incluindo mudanças de estado, alteração da chave de um componente e uso do método forceUpdate.

É importante usar esses métodos com sabedoria para evitar a re-renderização excessiva, pois isso pode impactar o desempenho da sua aplicação. Seguindo as práticas recomendadas e entendendo quando e por que o React renderiza novamente os componentes, você pode construir aplicativos React mais eficientes e rápidos.

Se você gostou deste artigo sobre React, confira estes tópicos;

• Melhores práticas de reação
• Bibliotecas de componentes React UI
• Os 6 melhores IDEs e editores React
• Reagir vs Backbone JS
• Por que o React é tão popular?
• O que você precisa saber sobre reagir
• Reagir WebSockets: Tutorial