Jak wykryć w Reacie ostatni rendering komponentu?

0

Czy da się w reacie wykryć jakoś ostatni rendering komponentu? Ponieważ potrzebuje wykonać pewną operację dopiero jak komponent zostanie ostatni raz przerenderowany.

2

Mówiąc "ostatni rendering komponentu" masz namyśli moment tuż przed odmontowaniem (skasowaniem) komponentu z DOM? Jeśli tak to wystarczy w useEffect zwrócić callbacka z kodem, który chcesz uruchomić po skasowaniu.

https://pl.reactjs.org/docs/hooks-effect.html#example-using-hooks-1

Zrobiłem prosty przykład (bez sprawdzania tego w przeglądarce, więc mogą być jakieś drobne literówki), który pokazuje na czym to polega

const App = () => {
  const [isVisible, setIsVisible] = useState(true);

  const toggle = () => {
    setIsVisible(!isVisible);
  };

  return (<>
    <p>isVisible: {isVisible.toString()}</p>
    <button onClick={toggle}>{isVisible ? 'Ukryj' : 'Pokaż'} komponent</button>
    {isVisible && <Component />}
  </>)
};

const Component = () => {
  useEffect(() => {
    console.log('RENDEROWANIE KOMPONENTU!');
  
    return () => {
      console.log('KASOWANIE KOMPONENTU!');
    };
  });

  return (
    <p>Lorem ipsum</p>
  );
};

Najważniejszy jest ten fragment

useEffect(() => {
  console.log('RENDEROWANIE KOMPONENTU!');

  return () => {
    console.log('KASOWANIE KOMPONENTU!');
  };
}, []);

Za każdym razem jak komponent zostanie wyrenderowany to wykona ten fragment console.log('RENDEROWANIE KOMPONENTU!');, natomiast podczas kasowania ten console.log('KASOWANIE KOMPONENTU!');.

0

useLayoutEffect, działa jak useEffect tylko wykona sie dopiero po wyrenderowaniu komponentu

1 użytkowników online, w tym zalogowanych: 0, gości: 1