![]() ![]() Since double-calling is exactly what would happen if we actually remount the component with previous state and DOM before the animation has finished. This is why I think the proper solution is to have the effect code be resilient to double-calling. Or if you do it too quick it will similarly get stuck. If you "solve" it with a ref, you're not gonna have an animation the second time at all. But this issue is what would happen if you were to quickly switch tabs yourself (when using our KeepAlive-like component). To verify your components are resilient to this, we simulate unmounting and remounting with restored state right away. Like if you switch Feed -> Profile -> Feed, and we mount Feed with the previous state so that input aren't lost. ![]() The reason we introduced it is we'd like to add a feature similar to KeepAlive in Vue that remounts a component with existing state. The default behavior (without a ref) is usually the correct one. It's hard to suggest something more specific though because I'm not familiar with common GSAP patterns. If it has "effect" in the name or takes dependencies as arguments, it's probably not a good candidate for a custom Hook. We don't recommend people to create "overly generic" Hooks. Please let me know if more details would be helpful! Or feel free to file an issue in the React tracker for more discussion.ĭo you see any issues with putting that inside a hook like this? This also lets you hide any quirks behind them. If there are some particularly common patterns for using GSAP with React, it would make sense to expose them as custom Hooks with React-leaning APIs rather than using GSAP directly. (However, the "symmetrical" setup/cleanup approach in this post makes a lot of sense to me! And if the animations are truly interruptible - which is ideal - then there should not be any visible effect from double-calling at all.) I wonder if there is some other way to call GSAP API in a way that the last call "wins" - i.e., express it as synchronization? That would resolve the issue.Īlternatively, you can track whether it has already ran manually: I don't know enough about GSAP so I can't tell whether this behavior is intentional or not. See the Pen ZEvryNb by gaearon-the-encoder ( on CodePen The issue can be reproduced in vanilla JS if you call om twice: Would be safe to re-run at any point because it just "re-synchronizes" some information. Effects act like a synchronization mechanism: they let you "mirror" some state into some imperative change in the DOM. In general, React leans towards assuming that effects are safe to re-run extra times. It's more of a temporary workaround while the libraries are getting updated, not a permanent strategy. We would generally not recommend disabling Strict Mode. Here is my forked sandbox you had given, I've removed extra inline CSS, so it may become evident.Hi folks! This is Dan (from React). When I edit the opacity value inside Chrome Dev Console the transition works fine, but when I want to change it using state it doesn't.Īny help? Thanks in advance! import React, ` I have it rendering on click using state, but I can't get it to fade in / fade out on click. So I'm making this app and I need to fade in the menu when I click the button. ![]()
0 Comments
Leave a Reply. |