Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On complete in use animate fix #106

Merged

Conversation

cgood92
Copy link
Contributor

@cgood92 cgood92 commented Sep 30, 2022

There are 2 fixes in this PR:

  1. The useEffect condition should run if onComplete || complete, not onCompleteTimeRef.current || complete.
  • This is because onCompleteTimeRef.current is ALWAYS truthy after the first time useEffect is ran, because we never set onCompleteTimeRef.current to anything falsey. We do clear the timeout, but that doesn't change the value of onCompleteTimeRef.current, which is just a number.
  • This also brings this file into parity with what is happening in the Animate component here: https://github.com/beekai-oss/react-simple-animate/blob/master/src/animate.tsx#L46
  1. When updating state, and wanting to include some prior state in that update, then you should always use the callback version of setState. See: https://reactjs.org/docs/hooks-reference.html#functional-updates.
  • In this case, it is particularly problematic because we're calling setAnimate in a callback of a setTimeout, so it is retrieving quite stale state. This is causing me problems when implementing this hook.

@cgood92
Copy link
Contributor Author

cgood92 commented Sep 30, 2022

@bluebill1049 will you please consider this PR?

@cgood92
Copy link
Contributor Author

cgood92 commented Sep 30, 2022

My next suggestion would be to update this hook with all the bells and whistles that are currently in the hooks of the Animate component. Then, use this hook in that component. No need to have duplicated hooks here.

@bluebill1049
Copy link
Member

thanks for the PR!

@bluebill1049
Copy link
Member

could you try to npm install again? looks like it's using a private package for some reason.

Clint Goodman added 2 commits October 1, 2022 20:17
Previous to this fix, in order to get the `onComplete` to be called, you had to pass in `complete`
The situation here is that the `setAnimate` is being called in a setTimeout callback.
By the time the callback has been called, the state may have been changed.  But,
the way this was written previous to this commit is that it would spread in the old values
of state.  Instead of doing that, we should use the callback method for setState(), which
takes the very latest state as it's first argument, and we spread that here instead.
@cgood92 cgood92 force-pushed the onComplete-in-use-animate-fix branch from 8f96870 to 415ff17 Compare October 2, 2022 02:26
@cgood92
Copy link
Contributor Author

cgood92 commented Oct 2, 2022

could you try to npm install again? looks like it's using a private package for some reason.

I did, I'm so sorry about that. Thanks. I have pushed up the yarn.lock changes.

Copy link
Member

@bluebill1049 bluebill1049 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the fix 🙏

@bluebill1049 bluebill1049 merged commit dcfa4eb into beekai-oss:master Oct 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants