#52 Memoize start callback in useAnimation hook

[marcin-piela]

Closes #52

[bluebill1049]

hey @marcin-piela tried your code, I think this doesn't solve the issue https://codesandbox.io/s/blissful-fog-76c4g

[marcin-piela]

I think that it does, cause you have to use React.useMemo (or declare it above component) for start and end:

const start = React.useMemo(() => ({ opacity: 0 }), []);
const end = React.useMemo(() => ({ opacity: 1 }), []);

const { play, style, isPlaying } = useAnimate({
    start: start,
    end: end,
    play: false,
    delay: 1
  });

otherwise start and end objects are created in every render (so they are different and hook useAnimation works as expected)

[bluebill1049]

what about this approach @marcin-piela : https://codesandbox.io/s/lucid-lamport-rc8lt

I have used useRef in this example, looks like it's working for me, any thoughts?

[marcin-piela]

what about this approach @marcin-piela : https://codesandbox.io/s/lucid-lamport-rc8lt

I have used useRef in this example, looks like it's working for me, any thoughts?

I prefer to use useCallback but yes useRef will solve all issues without memoizing start and end styles, I've updated my PR

[bluebill1049]

thank you very much @marcin-piela