Show refs in props

[jaredly]

Refs are stripped out by React, so they don't get included in the props listing (inline or sidebar). It would be nice to get those back.
Not sure where to get them from though.

raised by #225

[kassens]

My understanding is that refs as strings are deprecated and moving to the callback version (docs). Since functions don't have a meaningful representation in the sidebar, I'm not sure it's worth reviving in the meantime?

cc @sebmarkbage

[sophiebits]

They're not deprecated yet but they will be sometime. We can show key and ref above props (not in them) until then…

[sebmarkbage]

Even then, we might be able to get a meaningful representation of functions from name and displayName, or if the VM permits, even line number + source link.

[ADumaine]

Just when you think you are on the right path, someone deprecates all over it... :-)

I am building an app (my first react app) and in only one page it needs to communicate with another server (using socket.io). This page pulls in game data to display in the children of the current component. If the state of the current component changes, it causes the connection to the game server to drop and reestablish. I finally figured out that only setting the state of the child components via refs causes them to re-render without re-rendering the parent. This is exactly what is needed in this app. Is this not a valid use case for refs? This may not be a question for here, but why would refs be deprecated (now that my app depends on them)? Is there an alternative way to update specific children without re-rendering the parent component?

[sophiebits]

@ADumaine We're not deprecating refs. As with any change, we'll announce our plans with plenty of time for you to migrate your code to the new recommended way. Please don't worry until then.

(Why would changing the state of your parent component cause the connection to drop, though? Fixing that problem will probably simplify the rest of your code a lot so you won't even need refs.)

[ADumaine]

Thanks for the info on the refs.

The connection is not actually dropping (bad choice of words), it is just making the call to connect again because the component re-renders. This is unnecessary traffic and load on the game server.

I initially tried to implement the socket connection through the Actions and an api, but it got too confusing and complicated. It essentially caused the client to talk to the app server and the app server to talk to the game server. The current solution is to establish a connection to the game server directly in the component. The connection relies on player data from an Action to establish the connection, so it is a matter of timing to wait for the player data then make the connection, then tell the server who the player is. I could not figure out how to make the connection independent of the component re-rendering without putting it in a parent component, which is essentially how it is working now. Any suggestions are appreciated.

[sophiebits]

It's hard for me to help without more specific code-level examples, sorry.

[jaredly]

@ADumaine if you want to jump into the unofficial react community slack, I'm sure you can get some help: https://reactiflux.slack.com/

[ADumaine]

Thank you. I may do that once I can pull together a good example (bit messy at the moment). I am still building the game play area and the react component seems to be handling the incoming game server data and setting the states with no problem. So far so good....