React – forçar atualização de um component funcional (forceUpdate/re-render)

Algumas vezes precisamos forçar a atualização de um componente funcional no react.

Como fazer isso?

Class components:

Basta apenas atualizar o estado que o componente será renderizado novamente:

this.setState({ state: this.state });

O React já tem uma função para fazer isso sem a necessidade de alterar o estado por ele mesmo, oque torna o código mais bonito:

this.forceUpdate()

Functional components:

O método forceUpdate não está disponível quando se utiliza functional components, então como fazer isso?

const [remountCount, setRemountCount] = useState(0);
const refresh = () => setRemountCount(remountCount + 1);

Agora você precisa apenas chamar o método refresh para que a renderização aconteça.

Como tornar isso mais bonito?

Solution from: https://stackoverflow.com/questions/46240647/react-how-can-i-force-render-a-function-component

Crie uma React hook chamada useForceUpdate:

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => ++value); // update the state to force render
}

Com a hook criada, basta apenas consumir :

import React, { useState } from 'react';
import { useForceUpdate } from '../hooks';

function MyComponent() {
    // use your hook here
    const forceUpdate = useForceUpdate();

    return (
        <div>
            {/*Clicking on the button will force to re-render like force update does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

Obrigado a todos!

Tentarei escrever com mais frequência, muito obrigado!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *