{"id":7150,"date":"2022-03-03T12:17:52","date_gmt":"2022-03-03T06:47:52","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7150"},"modified":"2022-03-03T12:17:52","modified_gmt":"2022-03-03T06:47:52","slug":"higher-order-components","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/","title":{"rendered":"Higher-Order Components"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Higher-Order Components are what they sound like.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A function that takes a component and returns a replacement component is an example of a higher-order component. <\/span><span style=\"font-weight: 400;\">Higher-Order Components in React may be a pattern that stems from React&#8217;s nature, which favors composition over inheritance.<\/span><\/p>\n<p><strong>Consider the following scenario:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">In the preceding example, a higher-order component could be a function that takes as an argument a component called WrappedComponent. We&#8217;ve developed a replacement component called HOC that returns from its render function. While this adds no functionality, it illustrates the general pattern that each HOC function will follow.<\/span><\/p>\n<p><strong>We can use the HOC in the following way:<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">Const simpleHoc = higher-order component(MyComponent); A higher-order component is one that converts one component into another. It is important to note that a HOC does not change the input component. A HOC, on the other hand, composes the first component by wrapping it within a container component. A HOC could be a single function with really no side effects.<\/span><\/p>\n<p><strong>Facts about HOCs<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">One of the HOC pattern&#8217;s advantages is that it allows you to create a simple functional component with whatever logic you want.\u00a0<\/span><span style=\"font-weight: 400;\">Outside of your current component, you can update\/edit or transform props.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HOCs are frequently pure functions that return a replacement component, similar to JavaScript functions. Components in HOCs are not mutated or modified; these are created instead.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HOC is used to compose components for code reuse.<\/span><\/p>\n<p><strong>Case Studies<\/strong><\/p>\n<p><strong>Conditionally rendering components:\u00a0<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">HOCs are prone to conditionally rendering components. As an example, consider a case with many components that must be displayed if a specific criterion is met using the data provided in their props. We&#8217;ll have a reusable HOC that conditionally renders the component based on the data provided because HOCs have access to the wrapped component props.<\/span><\/p>\n<p><strong>Managing common users-\u00a0<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">interaction states must be managed. Another application of HOC is that it is frequently used to manage common user-interaction states. It is well known that users feel pampered when our application controls respond to something as insignificant as their cursor movements. For example, a user-interaction state, such as hover and focus, is typically displayed beautifully, without the need for repeated handlers with each component, by abstracting to a HOC that can have an event hook to strengthen the wrapped component with a state-specific flag.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Providing components in a variety of styles HOCs are also known to provide components in a variety of styles. We may have flag-specific styles not only for user interaction states but also for data-specific ones, based on the preceding (managing common user-interaction states), supported by the flag that we get from the HOC. Furthermore, if the need arises, we will have some more minor styles such as background color, font size, and font-weight in multiple places. These styles are frequently easily provided by a better Order Component by wrapping the component in one that simply augments props with the precise className (s).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Give a component with any prop. This is a common application for HOCs. Using HOCs, we will examine our codebase and determine which reusable props are required across components. Then there will be a wrapper HOC to provide those components with the reusable prop.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Things to avoid when working with higher-order components<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The use of HOCs within the render method should be avoided.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Refs aren&#8217;t very good.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Higher-Order Components are what they sound like. A function that takes a component and returns a replacement component is an example of a higher-order component. Higher-Order Components in React may be a pattern that stems from React&#8217;s nature, which favors composition over inheritance. Consider the following scenario: In the preceding example, a higher-order component could [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[722,723,736,755,754,756,247],"class_list":["post-7150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","tag-blog","tag-blogging","tag-component","tag-higher-order-components","tag-hoc","tag-order","tag-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Higher-Order Components - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/higher-order-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Higher-Order Components - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Higher-Order Components are what they sound like. A function that takes a component and returns a replacement component is an example of a higher-order component. Higher-Order Components in React may be a pattern that stems from React&#8217;s nature, which favors composition over inheritance. Consider the following scenario: In the preceding example, a higher-order component could [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/higher-order-components\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-03T06:47:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/High-order-components-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Higher-Order Components\",\"datePublished\":\"2022-03-03T06:47:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/\"},\"wordCount\":561,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/High-order-components.png\",\"keywords\":[\"blog\",\"blogging\",\"component\",\"Higher order components\",\"HOC\",\"order\",\"react\"],\"articleSection\":[\"Mobile\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/\",\"name\":\"Higher-Order Components - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/High-order-components.png\",\"datePublished\":\"2022-03-03T06:47:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/High-order-components.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/03\\\/High-order-components.png\",\"width\":3556,\"height\":2000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/higher-order-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Higher-Order Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Higher-Order Components - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/","og_locale":"en_US","og_type":"article","og_title":"Higher-Order Components - InnovationM - Blog","og_description":"Higher-Order Components are what they sound like. A function that takes a component and returns a replacement component is an example of a higher-order component. Higher-Order Components in React may be a pattern that stems from React&#8217;s nature, which favors composition over inheritance. Consider the following scenario: In the preceding example, a higher-order component could [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/","og_site_name":"InnovationM - Blog","article_published_time":"2022-03-03T06:47:52+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/High-order-components-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Higher-Order Components","datePublished":"2022-03-03T06:47:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/"},"wordCount":561,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/High-order-components.png","keywords":["blog","blogging","component","Higher order components","HOC","order","react"],"articleSection":["Mobile"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/higher-order-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/","url":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/","name":"Higher-Order Components - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/High-order-components.png","datePublished":"2022-03-03T06:47:52+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/higher-order-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/High-order-components.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2022\/03\/High-order-components.png","width":3556,"height":2000},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/higher-order-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Higher-Order Components"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=7150"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7150\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7151"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}