Czy da się w reacie wykryć jakoś ostatni rendering komponentu? Ponieważ potrzebuje wykonać pewną operację dopiero jak komponent zostanie ostatni raz przerenderowany.
0
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