Fix ActionCableConsumer component unmounting/remounting on parent component rerender

[ihollander]

This fixes the issue of the ActionCableConsumer component being unmounted and remounted every time the parent component rerenders.

Since a new ActionCableConsumer class component was being created every time the forwardRef function runs, it was continually unmounting and mounting new versions of the component. This would also have the effect of unsubscribing and re-subscribing to the socket connection each time the parent rerenders, not just when the parent component unmounts.

I moved the createReactClass function outside of the forwardRef function and the component now behaves as expected.

Fixes #21

[csx773]

I had the same problem. Was super annoying and was stuck debugging for 4 days with no working code. Switched back to the built in actioncable in react and it works so much easier. Just pass the cable as a prop down to any child comportment that needs to use sockets. `

[cseeger]

@csx773 - do you have an example?

[chancegraff]

Would love to see this merged; seeing the exact same issue as described in our project. It's preventing messages from being transmitted because the component is re-rendering at the exact moment a message is sent, so it never transmits.

[brunoalano]

I also would suggest this to be merged. It fixes the issue, and I'm currently using @ihollander branch in production

[jordanhudgens]

I'm using the fork as well, with an extension of also adding in the ability for a component to re-render if the channel is changed. I didn't create a PR since I'm not sure if that's an isolated feature that our app needed, but if anyone would like to see it, it's here:

https://github.com/jordanhudgens/react-actioncable-provider

[xaviablaza]

I'm using @jordanhudgens' fork in my app currently! Thanks!

[UtamaruMonster]

When will this be closed and merged?

[meshaabi]

this is very useful, would love to see it merged :)

[ssettle3]

+1 here

[JackHowa]

this has been merged here https://github.com/JackHowa/react-actioncable-provider/pull/6 -- also without react lifecycle warnings

npm install --save @thrash-industries/react-actioncable-provider
# OR
yarn add @thrash-industries/react-actioncable-provider

thanks @marcelkooi for notifying me.

Thanks @ihollander for the work. I added you as a collaborator to the project

[joaomosm]

this has been merged here JackHowa#6 -- also without react lifecycle warnings

npm install --save @thrash-industries/react-actioncable-provider
# OR
yarn add @thrash-industries/react-actioncable-provider

thanks @marcelkooi for notifying me.

Thanks @ihollander for the work. I added you as a collaborator to the project

I am trying to use your forked repo in order to solve this same render problem but now I am facing a diferent one

const FullGameTable = () => {

  const [participants, setParticipants] = useState([]);

  const handleReceivedGameDebug = (props) => {
    console.log(props, participants)
    setParticipants(props.participants)
  }

  return (
    <div>
      <ActionCableConsumer
        channel={{ channel: "GamesChannel" }}
        onReceived={handleReceivedGameDebug}
      />
    </div>
  );
};

Basically my setState hook function seems to not be called anymore, once participants inside handleReceivedGameDebug is always empty. Although, if I check participants through React Dev Tools, or even outside handleReceivedGameDebug fn, it is updated.

[JackHowa]

huh @joaomosm, would be happy to take a look if I can with an example including the sockets call? feel free to post in the issues on my extension

[ryanflynndev]

Would love to see this merged

[JackHowa]

I've published this and people are using my fork @ryanflynndev