gaearon / react-side-effect

Create components whose nested prop changes map to a global side effect

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

prevent handleStateChangeOnClient being called for server rendered items

koenpunt opened this issue · comments

I'm creating a DataLayer component to interact with google tag manager in an isomorphic way.

And thus far this works great, because I collect the events using my DataLayer component, and generate a javascript snippet with the dataLayer variable set to the rewinded data of the component.

But when the client application loads, it calls handleStateChangeOnClient with the same values, even though the properties of the rendered components didn't change.

Is there a way to circumvent this?

Hey @koenpunt, thanks for the suggestion and making this issue.

What did you end up doing to get around this? We're starting a discussion related to this feature in #34. Your input would be helpful and appreciated.

I went with the rather ugly solution of having 2 arrays in the source, the dataLayer variable for google tag manager, and reactDataLayer, both rendered on the server with the same data.
Then on the client, on every handleStateChangeOnClient, I check if it is in the reactDataLayer array, and if so, it gets sliced out and dataLayer.push isn't called.