Forçar React de Componentes para Re-renderizar

1. Forçar componentes de reação a renderizar novamente com os componentes de classe
2. Forçar componentes de reação a renderizar novamente com os componentes de função

Por padrão, os componentes React são acionados para renderizar novamente pelas mudanças em seu state ou props. Na maioria das vezes, se você seguir as melhores práticas do React, esse comportamento é mais que suficiente para atingir os resultados desejados.

Em alguns casos, o comportamento padrão da estrutura não é suficiente e você precisa renderizar novamente o componente manualmente. Antes de fazer isso, examine cuidadosamente o código. Forçar uma nova renderização é uma opção viável apenas em um número limitado de circunstâncias.

Forçar componentes de reação a renderizar novamente com os componentes de classe

Quando usado corretamente, uma chamada para o método setState() do React Class Component deve sempre acionar uma nova renderização. O bucle de vida shouldComponentUpdate() pode conter uma lógica condicional que evita esse comportamento.

Se você está chamando setState(), mas o componente não é atualizado, pode haver algo errado com seu código. Certifique-se de ter um motivo válido para usar o método forceUpdate().

this.forceUpdate()

Se o seu método render() depende de dados fora de state ou props, e você deseja acionar a re-renderização com base nas mudanças nesses dados, você pode usar o método forceUpdate().

Código de exemplo:

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

Nesse caso, uma mudança de state ou props não aciona a atualização. É o método forceUpdate() que faz isso.

Melhores Práticas

Os desenvolvedores do React só devem usar forceUpdate() como último recurso. A função de renderização deve ler apenas de props e state. Seguindo essas diretrizes, você pode garantir a simplicidade e a eficiência de seus componentes React.

Não é recomendado usar o método forceUpdate() com freqüência. Se você tem o hábito de usá-lo muito, pode dar uma olhada no seu código e ver se ele pode ser melhorado.

Forçar componentes de reação a renderizar novamente com os componentes de função

Os componentes da função não incluem o método forceUpdate(). No entanto, ainda é possível forçá-los a renderizar novamente usando os ganchos useState() ou useReducer.

useState

Semelhante ao método setState() dos componentes de classe, o gancho useState() sempre dispara uma atualização, desde que o objeto state atualizado tenha um valor diferente.

Você pode criar um gancho personalizado que faz uso do gancho useState() para forçar uma atualização. Aqui está um exemplo de código para esse gancho reutilizável:

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

Como todos sabemos, o gancho useState() retorna dois valores: o valor atual do estado e seu configurador. Nesse caso, precisamos apenas do setter newState.

useReducer

Uma vez que o gancho useState usa internamente useReducer, você pode usar este gancho diretamente para criar uma solução mais elegante. A solução recomendada documentos oficiais do React também usa useReducer. Aqui está um exemplo de solução:

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

O gancho useReducer() retorna o state e a função dispatch atuais. No exemplo acima, usamos a sintaxe [variableName, dispatchName] para armazenar esses valores.

Neste exemplo, chamar um manipulador handleChange() forçaria seu componente a atualizar todas as vezes.

Os ganchos não devem ser usados ​​dessa forma. Tente usar essas soluções para testes ou casos atípicos.