Saturday, 10 October 2020

Intellij WebStorm showing useless usage search on encapsulated React components (using HOC)

It is basically this issue.

While using code like

class SomeComponent extends React.Component {

}

export default withRouter(SomeComponent);

I can't use search usages properly, because it obviously finds the export line.

It can be hacked in functional components like this:

const SomeComponent = withRouter((props) => {
   //...component here
});
export default SomeComponent;

but gets very ugly when using redux for example:

const mapStateToProps = (state, ownProps) => ({
    ....
});

const SomeComponent = connect(mapStateToProps)({
    cartPhotos,
    digitals,
    balancePrice,
    photolabPrice,
    digitalsPrice,
    voucher,
    photosPrice,
    deliveryPrice,
    totalPrice,
    openPhotolabModal,
    isSidebar,
}) => {

});
export default SomeComponent;

My questions are:

  • Is there a way to overcome this without using such ugly approach?
  • Is there a way to overcome this on a class component AT ALL?


from Intellij WebStorm showing useless usage search on encapsulated React components (using HOC)

No comments:

Post a Comment