# Concerns

## React Dev Tools
Any wrapped components will be rendered into the React dev tools with their wrappers intact. This becomes pretty invasive when most of your components are using a HOC wrapper.

Here's a workaround for defining HOCs that respect stateless functional components and don't render a wrapper.

```js
function withName(Component) {
  class EnhancedComponent extends React.Component {
    render() {
      return Component(this.props, this.context);
    }
  }

  EnhancedComponent.displayName = Component.displayName || Component.name;
}
```

This way, the actual `<Component>` doesn't end up in the React tree. However, it only works for stateless components.

## Shallow Rendering
Shallow rendering doesn't work with components that are wrapped by HOC components.

```
shallow(<div><h1>Hi</h1></div>)
// => <div><h1>Hi</h1></div>

let Counter = connect(Counter)
shallow(Counter)
// => <Connected />
```

To keep components testable without enforcing the container/presentational divide, wrapped components need to be squashed and kept stateless.