Jak wymusić re-render w Reakcie?

Komponenty funkcyjne nie mają wbudowanej metody ponownego renderowania komponentów, tak jak robią to ich odpowiedniki oparte na klasach. Oznacza to, że nie mamy do dyspozycji metody forceUpdate(). Przypomnijmy jednak, że w React komponenty są zazwyczaj renderowane z powodu zmian stanu lub propsów (właściwości).

Wiedząc o tym, mamy kilka sposobów na wymuszenie przerenderowania komponentu.

Od wersji 16.8+ React posiada koncepcję zwaną Hookami, która może być używana w komponentach funkcyjnych do aktualizacji stanu, wykonywania efektów ubocznych itp. Wykorzystamy te hooki na naszą korzyść, aby ponownie wyrenderować komponent.

Oto kilka przykładów, jak wymusić aktualizację w komponencie funkcyjnym:

Poniższe hooki powinny być używane tylko w wyjątkowych przypadkach. Należy re-renderować komponenty tylko wtedy, gdy zmieni się jego stan.

Re-render komponentu funkcyjnego za pomocą useReducer

import React, { useReducer } from 'react'

const [ignored, forceUpdate] = useReducer(x => x + 1, 0);

function handleClick() {
    forceUpdate();
}

useReducer w Reakcie jest zwykle używany, gdy mamy złożoną logikę stanu i akcje. Tutaj używamy go po prostu do wyzwalania aktualizacji poprzez aktualizację fikcyjnej zmiennej stanu, x. Stan musi faktycznie ulec zmianie, aby wyzwolić aktualizację, dlatego jest zwiększany przy każdym wywołaniu.

Wymuszenie aktualizacji komponentu za pomocą useState

import React, { useState } from 'react'

// Tworzymy customowy hook useForceUpdate hook, który korzysta z useState()
const useForceUpdate = () => useState()[1];

// wywołujemy custom hook wewnątrz komponentu
const Hooks = () => {
  const forceUpdate = useForceUpdate();

  return (
    <button onClick={forceUpdate}>
      Update me
    </button>
  );
};

Powyższy przykład odpowiada funkcjonalności metody forceUpdate w komponentach klasowych.

Hook ten działa w następujący sposób:

Hook useState zwraca tablicę z dwoma elementami z wartością początkową przekazaną do funkcji hooka i funkcją aktualizującą.

W powyższym przykładzie natychmiast wywołujemy funkcję aktualizującą, która w tym przypadku jest wywoływana z undefined, więc jest to to samo, co wywołanie set...(undefined).

Jak widzisz, istnieje wiele sposobów na osiągnięcie tego samego celu. Należy pamiętać, że są to technicznie anty-wzorce i należy ich unikać, gdy tylko jest to możliwe. Ale jeśli nie jesteś w stanie rozwiązać podstawowego problemu i musisz wymusić aktualizację komponentu, to każda z metod, które tutaj pokazałem, powinna zadziałać.