When I execute setState in class component, I can pass the callback to the last argument, and callback execute after changing State:
this.setState({}, () => { *execute after changing state* })
My example:
const foo = () => {
setOpen(false);
bar(); // this function should be performed after completion setOpen changing, but setOpen is async func
}
Question: How to execute bar () immediately after the update of the hook through setOpen is completed with the false argument?
You'd do it like this:
const [ isOpen, setIsOpen ] = useState( false );
useEffect(() => {
if( !isOpen ) {
bar();
}
}, [ isOpen ]);
The useEffect hook is triggered once a change to isOpen is detected because it is listed in the dependencies for the useEffect hook.
isOpen changes
bar() every time isOpen changes to false.isOpen = false will render, and then bar() will executed, and component unmountFrom what I've gathered, you're dealing with some animations upon your component closing and that bar is the function to unmount the component.
Technically what you'd be looking for (if the animation takes 500ms to complete) is this:
// Add this line somewhere outside of your component, preferably in a helpers file.
const delay = ms => new Promise(res => setTimeout(res, ms));
const foo = async () => {
setOpen(false);
await delay(500) // Change this value to match the animation time
bar();
}
This should allow your animation to ru before unmounting the component.
