Stop async function in React component if component unmounts

Question

Say I have a React component which has some async function, like a setTimeOut function which performs a task on the DOM element of that component. If the component unmounts during that setTimeOut, how would I prevent that async function from firing? The resulting function that fires throws an error since the DOM element no longer exists due to the component unmounting.

I'm attempting to ask a general question about theoretical ways to go about this, since I have quite a specific—but quite uncommon—use-case that essentially got no views in a previous question. The specific use-case that I have involves calling destroy() on a pixi-react-fiber graphics component after an animation completes, when sometimes the component has been unmounted during the animation. I think the general form of this question should be able to help me understand an approach.

edit: adding example

Container.js

const CursorContainer = props => {
  const [darkMode, setDarkMode] = useState(props.darkMode)

  useEffect(() => {
    setDarkMode(props.darkMode)
  }, [props.darkMode])

  return (
    <Cursor darkMode={darkMode} />
  )
}

export default CursorContainer

Cursor.js

const TYPE = "Cursor"

export const behavior = {
  customDisplayObject: props => new PIXI.Graphics(),
  customApplyProps: function (g, _, props) {
    const { darkMode } = props
    g.clear()
    g.beginFill(darkMode ? 0x7225e6 : 0xd3fc03, 1)
    g.drawCircle(0, 0, 20)
    g.endFill()
    setTimeout(() => g.destroy(), 5000)
  },
}

const Cursor = CustomPIXIComponent(behavior, TYPE)

export default Cursor

If the darkMode is toggled, the Cursor component will be unmounted and remounted due to the state change. If this happens during the 5s setTimeOut, it will throw an error, since the graphics DOM element of the component will be gone and there will be nothing to destroy. How do I prevent this function from firing if the component has been unmounted?

May you share a minimal reproducible example which shows the issue? — evolutionxbox
– evolutionxbox, Commented Oct 21, 2020 at 16:56

andy mccullough · Accepted Answer · 2020-10-21 18:24:55Z

1

Use a ref for maintaining a reference to the interval, and then clear the interval in the effect clean up callback -

e.g.

const Component = () => {
    const intervalRef = useRef(null);
    
    useEffect(() => {
        intervalRef.current = setInterval(() => {}, 1000);
        
        return () => {
            clearInterval(intervalRef.current);
        }
    }, [])
}

The use of ref will allow you to clear the timeout/interval from other handlers in the component

edit...

based on your response, if you were to update to the following, to return the timeout -

export const behavior = {
  customDisplayObject: props => new PIXI.Graphics(),
  customApplyProps: function (g, _, props) {
    const { darkMode } = props
    g.clear()
    g.beginFill(darkMode ? 0x7225e6 : 0xd3fc03, 1)
    g.drawCircle(0, 0, 20)
    g.endFill()
    return setTimeout(() => g.destroy(), 5000)
  },
}

then whereever in you Cursor component, that you have access to customApplyProps you could get the setTimeout reference from it, e.g.

intervalRef.current = customApplyProps();

then in an effect, clean it up in the return callback -

useEffect(() => {
    return () => {
        clearInterval(intervalRef.current);
    }
}, [])

edited Oct 21, 2020 at 18:24

answered Oct 21, 2020 at 17:06

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FRMR Over a year ago

On second thought, I probably did need a simple example of my use-case, since the component is not a function or class based react component, but a CustomPIXIComponent from react-pixi-fiber. You can see my edit in the OP.

andy mccullough Over a year ago

depending on how you using customApplyProps, you could try changing the last line of that function to - return setTimeout(() => g.destroy(), 5000) so that whatever is calling it now has a ref to the timeout, then do as I have done above to clear the timeout when CustomPIXIComponent unmounts? e.g. intervalRef.current = customApplyProps() or whatever

FRMR Over a year ago

Forgive my being dense but I'm not totally sure I understand. Are you saying that returning the setTimeOut would give ref access to the parent? Do you think you could edit your answer?

Ethan Lipkind · Accepted Answer · 2020-10-21 17:17:30Z

0

I think a simpler approach here would be to lift the function up to a parent component which will not unmount. Then you can have a piece of state in the parent that controls whether the child component is rendered, and use that state as a logic gate when the function is invoked.

answered Oct 21, 2020 at 17:17

Ethan Lipkind

1,1565 silver badges7 bronze badges

4 Comments

FRMR Over a year ago

I'm not sure how I could lift the function to a parent component since it is a method of that specific CustomPIXIComponent... Unless I am misunderstanding what you're saying.

user5481197 Over a year ago

You don't have to lift the function. You can pass a call back function down to the props and then pass the g object to the function. const { darkMode, parentCallBackDestory } = props ... setTimeout(() => parentCallBackDestory(g), 5000). Your parent then has the "logic gate" in the parentCallBackDestory

FRMR Over a year ago

Yes I see, what would be the best sort of logic gate in this situation. I'm reading that isMounted is antipattern according to react docs.

user5481197 Over a year ago

Trying to keep it simple, your CustomPIXIComponent needs to access to your "g" object. So when React component unmounts naturally in the unmounting step you can call g.destroy(). ... Not sure what your CustomPIXIComponent looks like, but if it's using a hook then in the return statement return () => { g.destroy() }; .... The point is CustomPIXIComponent needs to handle when to destory g, not your customApplyProps function. This will avoid the antipattern.

The code painter · Accepted Answer · 2020-10-21 17:50:30Z

0

I had a simmilaire situaton and this how I solved it :

const CursorContainer = props => {

  const [darkMode, setDarkMode] = useState(props.darkMode)

  useEffect(() => {
   let mounted= true; 
   if(mounted) setDarkMode(props.darkMode)
    return () => { mounted=false ; }
  }, [props.darkMode])

  return (
    <Cursor darkMode={darkMode} />
  )
}

export default CursorContainer

answered Oct 21, 2020 at 17:50

The code painter

1,7743 gold badges17 silver badges40 bronze badges

Comments

saulmaldonado · Accepted Answer · 2020-10-21 18:29:32Z

0

If you are using function components, you can return a cleanup function in the useEffect hook that automatically gets called when the component unmounts. You can take the clearTimeout function that the setTimeout returns and call it in that cleanup function.

  useEffect(() => {
    const timeout = setTimeout(..., ...);

    return () => {
      clearTimeout(timeout);
    };
  }, []);

edited Oct 21, 2020 at 18:29

answered Oct 21, 2020 at 17:05

saulmaldonado

7561 gold badge7 silver badges9 bronze badges

1 Comment

FRMR Over a year ago

I've added a simplified example in my OP, the component is actually a CustomPIXIComponent which obviously does not allow hooks.

Collectives™ on Stack Overflow

Stop async function in React component if component unmounts

4 Answers 4

3 Comments

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related