Hooks + animations = how?

[Karolusrex]

Do you want to request a feature or report a bug?

I doubt it's a bug, so it's either a missing feature or a request for clarification on how to use/not to use hooks.

What is the current behavior?

I'm trying to design an interactive component with animation event listeners. As highlighted by this issue, state updates behave differently when triggered from events than from other sources. In this case I want to use requestAnimationFrame to incrementally update a value using a setter function.

This is my best effort so far (after a lot of tinkering):

const useAnimationFrame = callback => {
  let isDisplaying = true;
  const loop = () => {
    if (!isDisplaying) {
      return;
    }
    callback();
    requestAnimationFrame(loop);
  };
  useEffect(() => {
    requestAnimationFrame(loop);
    return () => {
      isDisplaying = false;
    };
  });
};

It sort of works, but I'm not sure it's ideal. Here's the fiddle: https://codesandbox.io/s/0y609q54pw. Is this really how I'm supposed to be doing it? I use this approach in a complex component (an image carousel) and the performance is noticably worse than the this.setState traditional approach counterpart.

[gaearon]

I think maybe this should work? https://codesandbox.io/s/ojxl32jm4z

It's a bit hard to diagnose performance problems when the demo doesn't reproduce them. :-) If you provide a more realistic demo it would be easier to help.

[Karolusrex]

Thank you, this is very useful. Could you explain why you chose to wrap your assignment of the callback ref inside useMutationEffect? It also works if you just reassign callbackRef.current without it, like this: https://codesandbox.io/s/3127nnn776

[gaearon]

We generally advise against mutating things during rendering. That can cause issues in concurrent mode (to be released later) and with server rendering.

[Karolusrex]

Thanks gaearon for the support!

[coderwaschbaer]

Hi i tried a different approach a little bit less complicate but it works for me with a tetris game i am making.

// HERE IT'S THE LOOP AND YOU CAN PASS IT DISPATCH FOR DIFFERENT ACTIONS
 const useAnimationFrame = (dispatch, setStopId)=>{
    const loop = t1 => t2=>{
      if( t2 - t1 > 450){
        dispatch({ type: 'ADD_STEP' }) 
        setStopId(()=>  window.requestAnimationFrame( loop(t2)))
      }else{
        setStopId(()=>  window.requestAnimationFrame( loop(t1)))
      }
    }
    useLayoutEffect(
      ()=>{
        setStopId(()=> window.requestAnimationFrame(loop(0))) 
        return ()=> window.cancelAnimationFrame(stopId)
      },
      []
    )
   }

// AND HERE IS IN MY CASE THE GAME OVER STATUS
 const useGameOver = (gameOverStatus, stopId) =>(
    useLayoutEffect(()=>{
      if(gameOverStatus){
        window.cancelAnimationFrame(stopId)
      }
    },
    [ gameOverStatus ]
    )
  );

[coderwaschbaer]

We generally advise against mutating things during rendering. That can cause issues in concurrent mode (to be released later) and with server rendering.

Hi i tried a different approach a little bit less complicate but it works for me with a tetris game i am making.

// HERE IT'S THE LOOP AND YOU CAN PASS IT DISPATCH FOR DIFFERENT ACTIONS
const useAnimationFrame = (dispatch, setStopId)=>{
const loop = t1 => t2=>{
if( t2 - t1 > 450){
dispatch({ type: 'ADD_STEP' })
setStopId(()=> window.requestAnimationFrame( loop(t2)))
}else{
setStopId(()=> window.requestAnimationFrame( loop(t1)))
}
}
useLayoutEffect(
()=>{
setStopId(()=> window.requestAnimationFrame(loop(0)))
return ()=> window.cancelAnimationFrame(stopId)
},
[]
)
}

// AND HERE IS IN MY CASE THE GAME OVER STATUS
const useGameOver = (gameOverStatus, stopId) =>(
useLayoutEffect(()=>{
if(gameOverStatus){
window.cancelAnimationFrame(stopId)
}
},
[ gameOverStatus ]
)
);

[ajaymore]

I think maybe this should work? https://codesandbox.io/s/ojxl32jm4z

It's a bit hard to diagnose performance problems when the demo doesn't reproduce them. :-) If you provide a more realistic demo it would be easier to help.

@gaearon

useMutationEffect is not available in react:16.8.6 Can you help me with this code.

[Daniel15]

@ajaymore - That's right, it was removed (see #14336). I think you should be able to use useLayoutEffect instead.

[wenzi0github]

Thank you, this is very useful. Could you explain why you chose to wrap your assignment of the callback ref inside useMutationEffect? It also works if you just reassign callbackRef.current without it, like this: https://codesandbox.io/s/3127nnn776

how to finished this, for example when num up to 100 be finished?