Connect's wrapped component can't be a stateless function

[dariocravero]

If the component wrapped with connect is a stateless function component, React warns about the internal ref that the wrapper holds with the following message Warning: Stateless function components cannot be given refs (See ref "wrappedInstance" in App created by Connect(App)). Attempts to access this ref will fail.

import { connect } from 'react-redux';
import React from 'react';

export default connect(mapStateToProps)(props => <div />);

Would it be useful to check whether the component is stateless or not to decide when to apply the ref or do we always need it?

[troch]

You can suppress that warning by using troch/react-stateless as a workaround for now.

What is the wrappedInstance ref used for?

[gaearon]

People use it for tests and side effects (i.e. calling instance methods) I presume.
Personally I don't have use for it, but it was repeatedly asked.

[hex13]

So is it okay to use stateless functions with React-Redux and I can ignore this warning? (I do not use ref or wrappedInstance).

[gaearon]

Yes, you can ignore the warning for now.

[hex13]

Ok, thx :)

[gaearon]

This is fixed via 2d3d0be.
We're making withRef an opt-in parameter, with false by default.

[dariocravero]

Thanks! :)

[mini-eggs]

I ran into something that may be related.

While using connect with a stateless component that had a child component with state (extends React.Component): the child component's componentWillReceiveProps would never fire on prop change. Instead the child component with state would rerender and it's componentDidMount would fire again. I ran into this within a create-react-native-app project.

If this is indeed an issue I would be happy to look into it and create a PR, I could also start a branch on the project to easily reproduce this (I've since removed the stateless component with connect).

[markerikson]

@mini-eggs : hmm. If it's something you can reproduce, please go ahead and file a new issue.