Jump to content
GreenSock

Drew49

Best practice about React with GSAP

Recommended Posts

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

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

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

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

@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.

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×