{"id":7011,"date":"2021-10-14T12:43:49","date_gmt":"2021-10-14T07:13:49","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=7011"},"modified":"2021-10-14T12:45:52","modified_gmt":"2021-10-14T07:15:52","slug":"pure-components","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/pure-components\/","title":{"rendered":"Pure Components"},"content":{"rendered":"

In this article, we will discuss what are pure functions in javascript? What are pure components? When to use pure components in React and when not to use them? What is the difference between Pure components and class and functional components? What are the advantages of pure components over others?<\/span><\/p>\n

When a function is called a pure function in javascript?<\/strong><\/h2>\n

A function<\/span> is called pure function if the following criteria are met:<\/span><\/p>\n

    \n
  1. The function should not produce any side effects, for example, making a network call, making a call to another function that has side effects, mutation data, etc.<\/span><\/li>\n
  2. The function should be dependent only on the input parameters.<\/span><\/li>\n<\/ol>\n

    What are pure components?<\/strong><\/h2>\n

    Pure components in React are the component that did not re-render <\/span>when the value of state and props has been updated with the same values. <\/span><\/p>\n

    A Pure component implements the \u201cshouldComponentUpdate\u201d lifecycle method by performing a <\/span>shallow comparison <\/b>on the props and state of the component. Now, what is shallow comparison?<\/span><\/p>\n

    Primitive types<\/strong><\/h3>\n

    A (shallow comparison) b returns true if a and b have the same value and are of the same type.<\/span><\/p>\n

    Example string \u201cravi\u201d (shallow comparison) \u201cravi \u201d returns true.<\/span><\/p>\n

    Complex types<\/strong><\/h3>\n

    \u00a0A (shallow comparison) b returns true if a and b reference exactly the same object.<\/span><\/p>\n

    var a =[1,2,3];\r\n\r\nvar b =[1,2,3];\r\n\r\nvar c=a;\r\n\r\n\r\n\r\n\r\nvar ab_eq = (a===b); \/\/false\r\n\r\nvar ab_eq = (a===b); \/\/true\r\n\r\n\r\n\r\n\r\nvar a =[ x : 1, y : 2 ];\r\n\r\nvar b =[ x : 1, y : 2 ];\r\n\r\nvar c=a;\r\n\r\n\r\n\r\n\r\nvar ab_eq = (a===b); \/\/false\r\n\r\nvar ab_eq = (a===b); \/\/true<\/pre>\n
    The pure component uses shallow comparison for checking the current value with the previous state. <\/span><\/p>\n
    Shallow comparison of the previous state with the current state. <\/span><\/p>\n
    (difference)\u00a0 component will\u00a0 re-render<\/span><\/p>\n
    Shallow comparison of previous value with the current value.<\/span><\/p>\n
    How can we create a pure component?<\/strong><\/h2>\n
    We can create a component by extending the pure component class.<\/span><\/p>\n
    \"\"<\/p>\n
    Difference between Regular component and Pure component.<\/strong><\/h1>\n\n\n\n\n
    \n
    Regular component<\/b><\/h2>\n<\/td>\n
    		\n
    Pure component<\/b><\/h2>\n<\/td>\n<\/tr>\n
    A regular component does not implement the<\/span><\/p>\n
    \u00a0\u201cshouldComponentUpdate\u201d method.<\/span><\/p>\n
    It always returns true by default.<\/span><\/p>\n<\/td>\n
    		\n
    A Pure component implements the \u201cshouldComponentUpdate\u201d lifecycle method by performing a shallow comparison on the props and state of the component.<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Advantages of using Pure components<\/span><\/h1>\n
      \n
    1. If there is no shallow comparison difference then the component will not re-render and performance will get boosted.<\/span><\/li>\n
    2. It is a good idea to ensure that all the children’s components are also pure to avoid unexpected behavior.<\/span><\/li>\n
    3. It takes care of the \u201cshouldComponentUpdate\u201d<\/span> method implicitly.<\/span><\/li>\n<\/ol>\n
       <\/p>\n","protected":false},"excerpt":{"rendered":"
      In this article, we will discuss what are pure functions in javascript? What are pure components? When to use pure components in React and when not to use them? What is the difference between Pure components and class and functional components? What are the advantages of pure components over others? When a function is called […]<\/p>\n","protected":false},"author":1,"featured_media":7009,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[360,257,412],"tags":[224,346,711,247,712,411],"class_list":["post-7011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-react","category-react-native","tag-java","tag-javascript","tag-pure-components","tag-react","tag-react-components","tag-react-native"],"yoast_head":"\nPure 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\/pure-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pure Components - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"In this article, we will discuss what are pure functions in javascript? What are pure components? When to use pure components in React and when not to use them? What is the difference between Pure components and class and functional components? What are the advantages of pure components over others? When a function is called […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/pure-components\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-14T07:13:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-14T07:15:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/10\/pure-components-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Pure Components\",\"datePublished\":\"2021-10-14T07:13:49+00:00\",\"dateModified\":\"2021-10-14T07:15:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/\"},\"wordCount\":368,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/pure-components-scaled.jpg\",\"keywords\":[\"java\",\"JavaScript\",\"pure components\",\"react\",\"react components\",\"react native\"],\"articleSection\":[\"JavaScript\",\"React\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/\",\"name\":\"Pure Components - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/pure-components-scaled.jpg\",\"datePublished\":\"2021-10-14T07:13:49+00:00\",\"dateModified\":\"2021-10-14T07:15:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/pure-components-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/pure-components-scaled.jpg\",\"width\":2560,\"height\":1440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/pure-components\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pure 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":"Pure 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\/pure-components\/","og_locale":"en_US","og_type":"article","og_title":"Pure Components - InnovationM - Blog","og_description":"In this article, we will discuss what are pure functions in javascript? What are pure components? When to use pure components in React and when not to use them? What is the difference between Pure components and class and functional components? What are the advantages of pure components over others? When a function is called […]","og_url":"https:\/\/www.innovationm.com\/blog\/pure-components\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-10-14T07:13:49+00:00","article_modified_time":"2021-10-14T07:15:52+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/10\/pure-components-scaled.jpg","type":"image\/jpeg"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Pure Components","datePublished":"2021-10-14T07:13:49+00:00","dateModified":"2021-10-14T07:15:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/"},"wordCount":368,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/10\/pure-components-scaled.jpg","keywords":["java","JavaScript","pure components","react","react components","react native"],"articleSection":["JavaScript","React","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/pure-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/","url":"https:\/\/www.innovationm.com\/blog\/pure-components\/","name":"Pure Components - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/10\/pure-components-scaled.jpg","datePublished":"2021-10-14T07:13:49+00:00","dateModified":"2021-10-14T07:15:52+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/pure-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/10\/pure-components-scaled.jpg","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/10\/pure-components-scaled.jpg","width":2560,"height":1440},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/pure-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Pure 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\/7011","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=7011"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/7011\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/7009"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=7011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=7011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=7011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}