{"id":956,"date":"2018-01-07T16:42:15","date_gmt":"2018-01-07T16:42:15","guid":{"rendered":"https:\/\/greladesign.co\/blog\/?p=956"},"modified":"2018-03-13T22:10:56","modified_gmt":"2018-03-13T22:10:56","slug":"order-of-higher-order-components-hoc-matters","status":"publish","type":"post","link":"https:\/\/greladesign.co\/blog\/2018\/01\/07\/order-of-higher-order-components-hoc-matters\/","title":{"rendered":"Order of Higher Order Components (HOC) matters"},"content":{"rendered":"

I’ve just learned the hard way that order of calling Higher Order Components (HOC) matters and can lead to hard to debug errors. I’ve used the Redux and React Router Dom. Started with Redux so I had component like so:<\/p>\n

\r\nimport react, {Component} from 'react'\r\nimport connect from 'react-redux\/lib\/connect\/connect';\r\n\r\nclass Home extends Component {\r\n    \/\/ ... chopped for brevity\r\n}\r\n\r\nexport default connect(mapStateToProps)(Home);\r\n<\/pre>\n
<\/p>\n
Then in the component I wanted to navigate programmatically so I’ve used withRouter<\/code> to get access to history<\/code> object.<\/p>\n
\r\nimport react, {Component} from 'react'\r\nimport connect from 'react-redux\/lib\/connect\/connect';\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nclass Home extends Component {\r\n    \/\/ ... chopped for brevity\r\n    render(){\r\n        \/\/ ... chopped for brevity\r\n\r\n        <button onClick={() => {\r\n            this.props.history.push('\/some-page');\r\n        }}>Go<\/button>\r\n        \/\/ ... chopped for brevity\r\n    }\r\n}\r\n\r\nexport default connect(mapStateToProps)(withRouter(Home));\r\n<\/pre>\n
Well, I was really surprised and was scratching my head why the page is not showing, the url has changed, the history<\/code> object was changed, but requested page was not there! After extensive search on the internet, I’ve found this GIT issue comment<\/a> that resolved it to me. The problem was with the order! You have to call withRouter<\/code> first.<\/p>\n
\r\nimport react, {Component} from 'react'\r\nimport connect from 'react-redux\/lib\/connect\/connect';\r\nimport { withRouter } from 'react-router-dom';\r\n\r\nclass Home extends Component {\r\n    \/\/ ... chopped for brevity\r\n    render(){\r\n        \/\/ ... chopped for brevity\r\n\r\n        <button onClick={() => {\r\n            this.props.history.push('\/some-page');\r\n        }}>Go<\/button>\r\n        \/\/ ... chopped for brevity\r\n    }\r\n}\r\n\r\nexport default withRouter(\r\n                    connect(mapStateToProps)(Home)\r\n                );\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
I’ve just learned the hard way that order of calling Higher Order Components (HOC) matters and can lead to hard to debug errors. I’ve used the Redux and React Router Dom. Started with Redux so I had component like so:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":""},"categories":[141,325],"tags":[223,324,322,323],"_links":{"self":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/956"}],"collection":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/comments?post=956"}],"version-history":[{"count":5,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/956\/revisions"}],"predecessor-version":[{"id":962,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/posts\/956\/revisions\/962"}],"wp:attachment":[{"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/media?parent=956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/categories?post=956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greladesign.co\/blog\/wp-json\/wp\/v2\/tags?post=956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}