search

gaearon / react-side-effect

Create components whose nested prop changes map to a global side effect
MIT License
1.22k stars 75 forks source link

prevent handleStateChangeOnClient being called for server rendered items #30

Open koenpunt opened 7 years ago

koenpunt commented 7 years ago

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?

lourd commented 7 years ago

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.

koenpunt commented 7 years ago

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.