Drew49 Posted July 16, 2022 Share Posted July 16, 2022 Hi, Here there is my code : https://codesandbox.io/s/gsap-with-react-n23k7h?file=/src/index.tsx I'm following a tutorial written in JS Vanilla with GSAP, but i need to use it on React so i transform all the code. Of course all work's great, like expected. But i don't know if there is a better way to write that. For example inside the components "InputContainer" (/component/form/input/inputContainer): 1. i push all the '.input-container' inside the revealRefs array, instead of querySelectorAll ( i also tried the utility 'selectors' but it doesn't work, maybe because this container is inside a map loop, don't know) 2. Then inside the useEffect i loop revealRefs, and inside the forEach i needed to use querySelector if i wanna select all the input's There are similar example in the code, but if i refactor one component, the others are the same. So there is a better way to handle that? Thank You😆😀 Link to comment Share on other sites More sharing options...
SteveS Posted July 17, 2022 Share Posted July 17, 2022 For starters, use the useSelector hook listed in this article: You should avoid using DOM selectors when possible and opt for refs instead. Link to comment Share on other sites More sharing options...
Drew49 Posted July 18, 2022 Author Share Posted July 18, 2022 Thank you, now with the useSelector hook i resolve all the problems, it works great! But i don't know why with only "gsap.utils.selector(ref)" it did't work and i needed to use useMemo Link to comment Share on other sites More sharing options...
GreenSock Posted July 18, 2022 Share Posted July 18, 2022 30 minutes ago, Drew49 said: But i don't know why with only "gsap.utils.selector(ref)" it did't work and i needed to use useMemo I wonder if you were using it wrong - do you have a very simple demo showing it NOT working? Link to comment Share on other sites More sharing options...
SteveS Posted July 18, 2022 Share Posted July 18, 2022 @Drew49 In react, Ref's are not populated until after the first render. In theory, so long as you were using your q function in a hook, it should have worked. If you tried to use it outside of a hook, it wouldn't have. I didn't check at the time and your code has since changed, so I have no idea. 2 Link to comment Share on other sites More sharing options...
Drew49 Posted July 20, 2022 Author Share Posted July 20, 2022 On 7/18/2022 at 6:14 AM, GreenSock said: I wonder if you were using it wrong - do you have a very simple demo showing it NOT working? I try again to use it, and now it works, previously i had done some mistake. On 7/18/2022 at 4:20 PM, SteveS said: @Drew49 In react, Ref's are not populated until after the first render. In theory, so long as you were using your q function in a hook, it should have worked. If you tried to use it outside of a hook, it wouldn't have. I didn't check at the time and your code has since changed, so I have no idea. Thank you Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now