{"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,"inline_featured_image":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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t