Forçar um componente React a ser renderizado novamente

A beleza dos componentes React é que eles são renderizados e atualizados automaticamente com base em uma alteração no state ou propsO senhor pode simplesmente atualizar o estado de qualquer lugar e, de repente, o elemento da interface do usuário é atualizado – incrível! No entanto, pode haver um caso em que o senhor queira simplesmente forçar uma nova renderização de um componente React.

Observação: na maioria dos casos, o senhor nunca deve forçar um componente React a ser renderizado novamente; a renderização deve sempre ser feita com base em alterações de estado ou de props. No entanto, eu não julgo e pode haver um caso em que o senhor precise legitimamente forçar um componente React a ser renderizado novamente, então vamos lá!

Forçar a renderização do componente React

Há várias maneiras de forçar a renderização de um componente React, mas elas são essencialmente as mesmas. A primeira é usar this.forceUpdate(), que ignora shouldComponentUpdate:

someMethod() {
    // Force a render without state change...
    this.forceUpdate();
}

Supondo que seu componente tenha um state, o senhor também poderia chamar o seguinte:

someMethod() {
    // Force a render with a simulated state change
    this.setState({ state: this.state });
}

Este blog não tem o objetivo de ser prescritivo, portanto, não vou repreender os desenvolvedores por usarem esse método de força bruta. Mais uma vez, é provável que haja uma maneira melhor e mais “React-y” de renderizar um componente adequadamente, mas se o senhor estiver desesperado para fazer com que um componente seja renderizado sob comando, há muitas maneiras de fazer isso com o React.