Move setup outside useEffect hook

[Sirk]

The setup should be executed outside the useEffect method. Because the parent can in some cases be mounted after the child. In this case the lax.elements is reset in the setup function.

[arthurdenner]

@Sirk, thanks for contributing.

Could you provide an example where the current way of setup is causing problems?

[Sirk]

Hello @arthurdenner !

Will be difficult for me to provide an example at this time.

But to explain, in my case (a Gatsby app).

The didMount of the page (parent) component is executed after the child component.
So the lax.setup() inside the useLax() is executed after the lax.addElement from the useLaxElement() hook. And so it reset the added childs as the lax.setup method do in lax.js.

Will send you an example if I get some time soon !

[arthurdenner]

@Sirk, I think the problem may be on the new versions lax itself - checkout out this issue - so I'm holding the merge until make sure the problem is not on the lax library.

[arthurdenner]

@Sirk, quoting the author of lax.js:

It is because in previous versions lax would look for components with attribute names to populate elements e.g. data-lax-preset="fadeIn" so it was finding the bubble element when lax.setup() was called. In v1.2 you need to add class='lax' to any elements that you want to be automatically animated by lax, so you can fix your example with className="bubble lax", however it makes more sense to do what I said and call lax.setup() asap.

Your change was released in the version 2.0.2. 🎉

Thanks for the contribution once again!

[Sirk]

Happy to hear ! It will fix the bug as the lax.setup() will be called before each initialization of child react componnents.

[arthurdenner]

@all-contributors please add @Sirk for code.

[allcontributors]

@arthurdenner

I've put up a pull request to add @Sirk! 🎉