fbc9b6c4.d82645db.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{128:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return a})),n.d(t,"metadata",(function(){return c})),n.d(t,"rightToc",(function(){return p})),n.d(t,"default",(function(){return l}));var r=n(3),o=n(7),i=(n(0),n(134)),a={id:"with-higher-order-component",sidebar_label:"With higher order component",title:"With Higher Order Component",description:"With higher order component | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["with higher order component","react ternary operation","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"With higher order component",image:"/img/reactpatterns-cover.png"},c={unversionedId:"with-higher-order-component",id:"with-higher-order-component",isDocsHomePage:!1,title:"With Higher Order Component",description:"With higher order component | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/with-higher-order-component.md",slug:"/with-higher-order-component",permalink:"/docs/with-higher-order-component",version:"current",sidebar_label:"With higher order component",sidebar:"someSidebar",previous:{title:"Multi-level Conditional Rendering",permalink:"/docs/multi-level-conditional-rendering"},next:{title:"External Templating Component",permalink:"/docs/external-templating-component"}},p=[],s={rightToc:p};function l(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},s,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Higher order component is a perfect match for conditional rendering in React. HOC can have multiple use cases. Yet one use case could be to alter the look of a component. To make the use case more specific, it could be to apply a conditional rendering for a component, let's have a look at a HOC that either shows a loading indicator or a desired component."),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"// HOC declaration\nfunction withLoadingIndicator(Component) {\n  return function EnhancedComponent({ isLoading, ...props }) {\n    if (!isLoading) {\n      return <Component { ...props } />\n    }\n\n    return <div><p>Loading...</p></div>\n  }\n}\n\n// Usage\nconst ListWithLoadingIndicator = withLoadingIndicator(List)\n\n<ListWithLoadingIndicator\n  isLoading={props.isLoading}\n  list={props.list}\n/>\n")),Object(i.b)("p",null,"In the example above, the ",Object(i.b)("inlineCode",{parentName:"p"},"List")," component can focus on rendering the list. It doesn't have to bother with a loading state. Ultimately you could add more HOC to shield away multiple conditional rendering edge cases."))}l.isMDXComponent=!0},134:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return h}));var r=n(0),o=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=o.a.createContext({}),l=function(e){var t=o.a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},d=function(e){var t=l(e.components);return o.a.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.a.createElement(o.a.Fragment,{},t)}},m=o.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,a=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),d=l(n),m=r,h=d["".concat(a,".").concat(m)]||d[m]||u[m]||i;return n?o.a.createElement(h,c(c({ref:t},s),{},{components:n})):o.a.createElement(h,c({ref:t},s))}));function h(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=m;var c={};for(var p in t)hasOwnProperty.call(t,p)&&(c[p]=t[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,a[1]=c;for(var s=2;s<i;s++)a[s]=n[s];return o.a.createElement.apply(null,a)}return o.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);