{"id":8128,"date":"2017-06-20T11:16:59","date_gmt":"2017-06-20T08:16:59","guid":{"rendered":"http:\/\/railsware.com\/blog\/?p=8128"},"modified":"2021-08-12T16:58:06","modified_gmt":"2021-08-12T13:58:06","slug":"hideable-react-component-using-hoc","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/hideable-react-component-using-hoc\/","title":{"rendered":"Hideable React component using HOC"},"content":{"rendered":"\n

Imagine that we have a very simple React<\/code> component Hello<\/code> which greets a user with a message:<\/p>\n\n\n\n

import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function Hello({ name }) {\n  return (<\/pre>\n\n\n\n
Hello, {name}!<\/strong><\/p>\n\n\n\n
  );\n}\nHello.propTypes = {\n  name: PropTypes.string.isRequired\n};\n<\/pre>\n\n\n\n
And here is how we use it:<\/p>\n\n\n\n
 <\/div>\n\n\n\n
 <\/pre>\n\n\n\n
Great simple component, we really like the code. But it turns out that the name<\/code> value can be null<\/code> until we fetch it from a Back-End. We don’t want our users to see a stub: Hello, !<\/span>. So we decided to hide the text if the name<\/code> is null<\/code>:<\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default function Hello({ name }) {\n  if (name == null) {\n    return null;\n  }\n  return (<\/pre>\n\n\n\n
Hello, {name}!<\/strong><\/p>\n\n\n\n
  );\n}\nHello.propTypes = {\n  name: PropTypes.string.isRequired\n};\n<\/pre>\n\n\n\n
Looks good! Stub has gone and the message shows up only when the profile is loaded. But there is another issue – some noisy error message in the console:<\/p>\n\n\n\n
Warning: Failed prop type: Required prop 'name' was not specified in 'Hello'\n<\/pre>\n\n\n\n
Ouch, because name<\/code> is null<\/code> it doesn’t pass propTypes<\/code> validation. Maybe we need to provide some default value like empty string and check for the name not to be empty?<\/p>\n\n\n\n
This escalates quickly and we are now shedding crutches instead of focusing on the business logic of the component. What if we have dozens of required properties – name, age and other data which will come later. It doesn’t sound cool if we have to set up some default values for all of them.<\/p>\n\n\n\n
Of course, this case can be handled directly by JavaScript outside of the component:<\/p>\n\n\n\n
{user.name && }<\/div>\n\n\n\n
 <\/pre>\n\n\n\n
This solution is okay but what if we use Redux<\/code> and provide name<\/code> value directly to container:<\/p>\n\n\n\n
import { connect } from 'react-redux';\nimport Hello from '..\/..\/components\/Hello';\n\nconst mapStateToProps = (state) => {\n  const user = state.user;\n  return {\n    name: user.name\n  };\n};\n\nexport default connect(mapStateToProps)(Hello);\n<\/pre>\n\n\n\n
Now we need to pass the user<\/code> object to the Hello’s parent for using JavaScript-hiding. Or we should rollback to the uglier solution and handle empty state within Hello<\/code>.<\/p>\n\n\n\n
Solution<\/h3>\n\n\n\n
But can we do better? Can we have a simple, original, neat version of Hello<\/code> with a normal propTypes<\/code> validation and make them hideable on some condition? As a bonus, we want to extract such behavior and reuse with other components.<\/p>\n\n\n\n
It’s actually doable! Because React components are composable, we can easily create Higher Order Component(HOC) which accepts original always-shown component and turns it into hideable when some condition is met. Here is the code of such HOC<\/code>:<\/p>\n\n\n\n
import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst propTypes = {\n  hideComponent: PropTypes.bool,\n  children: PropTypes.node\n};\nconst defaultProps = {\n  hideComponent: false\n};\n\nfunction getDisplayName(component) {\n  return component.displayName || component.name || 'Component';\n}\n\nexport default function Hideable(component) {\n  function HideableComponent({ hideComponent, children, ...props }) {\n    if (hideComponent) {\n      return null;\n    }\n    return React.createElement(component, props, children);\n  }\n  HideableComponent.displayName = `Hideable(${getDisplayName(component)})`;\n  HideableComponent.propTypes = propTypes;\n  HideableComponent.defaultProps = defaultProps;\n  return HideableComponent;\n}\n<\/pre>\n\n\n\n
So Hideable<\/code> is a simple function which wraps any passed-in component into a proxy HideableComponent<\/code>. This proxy component has only one real property – hideComponent<\/code> and if the value of hideComponent<\/code> is truthy – child component will not be rendered:<\/p>\n\n\n\n
\"Hideable<\/a><\/figure>\n\n\n\n
Let’s make our Hello<\/code> hideable and wrap it into Redux<\/code>:<\/p>\n\n\n\n
import { connect } from 'react-redux';\nimport Hello from '..\/..\/components\/Hello';\nimport Hideable from '..\/..\/utils\/hideable';\n\nconst HideableHello = Hideable(Hello);\n\nconst mapStateToProps = (state) => {\n  const user = state.user;\n  if (!user.name) {\n    return { hideComponent: true };\n  }\n  return {\n    name: user.name\n  };\n};\nexport default connect(mapStateToProps)(HideableHello);\n<\/pre>\n\n\n\n
Now mapStateToProps<\/code> manages visibility of the Hello<\/code> component and we haven’t changed anything within the original Hello<\/code> component.<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n
So we started from a very simple component and ended up with the same component topped-up with hideable logic. Using the same HOC approach, you can build more complex shareable behaviors and use them to build complex components from the simple ones.<\/p>\n\n\n\n
That’s it! I hope this neat trick will help you write simpler React components and reduce an amount of a boilerplate code.<\/p>\n","protected":false},"excerpt":{"rendered":"
Imagine that we have a very simple React component Hello which greets a user with a message: import React from ‘react’; import PropTypes from ‘prop-types’; export default function Hello({ name }) { return ( Hello, {name}! ); } Hello.propTypes = { name: PropTypes.string.isRequired }; And here is how we use it:     Great simple…<\/p>\n","protected":false},"author":25,"featured_media":9409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Sergii Boiko"],"class_list":["post-8128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2017\/06\/Hideable-e1497452196938.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/8128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=8128"}],"version-history":[{"count":33,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/8128\/revisions"}],"predecessor-version":[{"id":13989,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/8128\/revisions\/13989"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/9409"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=8128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=8128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=8128"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=8128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}