GSDevTools and React (18)

[abernier 2 Likes (Newbie)]

I'd like to use GSDevTools in a React (18) project with HRM enabled (with Vite).

 

Using the new gsap.context(), I tried `.create()`ing it inside:
 

// src/App.js

function App() {
  useEffect(() => {
    const ctx = gsap.context(() => {
      const gsDevTools = GSDevTools.create(); // HERE
      
      gsap.fromTo(...);
    });
    
    return () => ctx.revert();
  }, [])

  return (<>...</>)
}

but once HRM reloads, I got 2 (or more) GSDevTools one over the other.

 

I've contacted the support and quickly got a quick answer from @Cassie:
 

Quote

So in React 18 effects get called twice to double check that you’re cleaning up properly should your component get rendered again. We made context to make cleanup nice and easy, but context only groups tweens, timelines and scrollTriggers ready too be killed. You’ll need to manually kill your GSDevTools instance with .kill() in that cleanup function.

What I understand from this, is I have to "manually" cleanup (without the help of `ctx.revert()`) my gsDevTools instance. Here is my try:
 

// src/App.js

function App() {
  // GSDevTools instance
  useEffect(() => {
    const gsDevTools = GSDevTools.create();
    return () => gsDevTools.kill();
  }, [])

  // Tweens
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(...);

      // other tweens...
    });
    
    return () => ctx.revert();
  }, [])

  return (<>...</>)
}

@Cassie am I correct? Is this the correct way of properly handle GSDevTools ?

 

As you can see, I have instantiated it in its own `useEffect`: is it something recommended?

Ultimately and to be sure, why GSDevTools is not "auto-cleaned" with `gsap.context()`? Is this something that could come in a next release? (or no, this is intentional)

Thank you

[elegantseagulls 1,430 Likes (Superhero)]

I'm not sure that GSDevTools is something that's meant for production... but to kill it, from the docs:

 

• How do I kill/destroy/remove the dev tools instance?

  If you have a reference to the dev tools (it's probably easiest to give the dev tools instance an id, i.e. GSDevTools.create({id:"main"})) then you can kill the instance by using GSDevTools.getById("main").kill().

[Cassie 5,164 Likes (Superhero)]

Yep - It's not meant for production, just for debugging, so I doubt we'll add it in to context - It's nice and simple to create and kill as it stands.

[abernier 2 Likes (Newbie)]

alright, thank you

A last thing: I have a TS warning about calling .kill() on my instance

 

 

however, gsDevTools is typed:

 

how to avoid this warning?

[elegantseagulls 1,430 Likes (Superhero)]

Do you still get the error if you getById then kill it?
 

GSDevTools.create({ id:"main" }))

GSDevTools.getById("main").kill()

 

[GreenSock 18,295 Likes (Superhero)]

Sorry about the confusion there - I'll add kill() to the TypeScript definitions in the next release. That method exists, of course - it just wasn't in the TypeScript definitions file. You should be able to just ignore that warning for now.