React-redux: Connect's wrapped component can't be a stateless function

Created on 8 Oct 2015 · 9Comments · Source: reduxjs/react-redux

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?

Source

dariocravero

Most helpful comment

Yes, you can ignore the warning for now.

gaearon on 11 Oct 2015

👍3

All 9 comments

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

What is the wrappedInstance ref used for?

troch on 9 Oct 2015

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.

gaearon on 9 Oct 2015

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

hex13 on 11 Oct 2015

👍1

Yes, you can ignore the warning for now.

gaearon on 11 Oct 2015

👍3

Ok, thx :)

hex13 on 11 Oct 2015

This is fixed via https://github.com/rackt/react-redux/commit/2d3d0beade55477b3af65534ceb793db18b25705.
We're making withRef an opt-in parameter, with false by default.

gaearon on 15 Oct 2015

Thanks! :)

dariocravero on 17 Oct 2015

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).