\n| <\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Class component<\/strong><\/td>\n| <\/p>\n Functional component<\/strong><\/td>\n<\/tr>\n\n| \u00a0Class-based Components uses ES6 class syntax.<\/td>\n | Functional Components are simpler comparing to class-based functions.<\/p>\n <\/td>\n<\/tr>\n | \n| The lifecycle methods can be used.<\/td>\n | Functional Components mainly focuses on the UI of the application, not on the behavior.<\/td>\n<\/tr>\n | \n| More code to write.<\/td>\n | Easy to write.<\/td>\n<\/tr>\n | \n| Used for presenting static data.<\/td>\n | Used for dynamic source of data.<\/td>\n<\/tr>\n | \n| Can\u2019t handle fetching data.<\/td>\n | Handles any data that might change.<\/td>\n<\/tr>\n | \n| It must have a render() method.<\/td>\n | It doesn\u2019t have a render() method.<\/td>\n<\/tr>\n | \n| Here,React lifecycle methods (like componentDidMount, etc.) are used<\/td>\n | React hooks are there to be as a better alternative to the traditional React lifecycle methods.<\/td>\n<\/tr>\n | \n| For e.g:<\/p>\n const [name,SetName]= React.useState(\u2018 \u2018)<\/td>\n | For e.g:<\/p>\n constructor(props) {<\/p>\n super(props);<\/p>\n this.state = {name: \u2018 \u2018}<\/p>\n }<\/p>\n <\/td>\n<\/tr>\n | \n| In functional components to make them Stateful, Hooks can be easily used.<\/td>\n | In class component to implement hooks,It requires different syntax.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Class component Functional component \u00a0Class-based Components uses ES6 class syntax. Functional Components are simpler comparing to class-based functions. The lifecycle methods can be used. Functional Components mainly focuses on the UI of the application, not on the behavior. More code to write. Easy to write. Used for presenting static data. Used […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16598,16594,16591,16592,16586,16595,16589,16590,16593,16588,16600,16587,16597,16599,16596],"class_list":["post-3954","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-are-functional-components-faster-than-class-components","tag-class-component-react","tag-components-and-props","tag-difference-between-class-component-and-functional-component-in-react","tag-differences-between-functional-components","tag-functional-component-to-class-component","tag-functional-components-vs-class-components-in-react-js","tag-functional-components-vs-class-components-in-reactjs","tag-functional-vs-class-components-react","tag-functional-vs-class-components-in-react","tag-react-class-component-example","tag-react-class-component-vs-functional-component","tag-react-functional-component","tag-react-pure-functional-component","tag-why-functional-components-are-better"],"yoast_head":"\n Difference between class component and functional component<\/title>\n<meta name=\"description\" content=\"Difference between class component and functional component - Class-based Components uses ES6 class syntax.\" \/>\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.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Difference between class component and functional component\" \/>\n<meta property=\"og:description\" content=\"Difference between class component and functional component - Class-based Components uses ES6 class syntax.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T10:20:54+00:00\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/\",\"name\":\"Difference between class component and functional component\",\"isPartOf\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\"},\"datePublished\":\"2022-03-21T10:20:54+00:00\",\"dateModified\":\"2022-03-21T10:20:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"Difference between class component and functional component - Class-based Components uses ES6 class syntax.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\/\/www.wikitechy.com\/interview-questions\"],\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Difference between class component and functional component","description":"Difference between class component and functional component - Class-based Components uses ES6 class syntax.","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.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/","og_locale":"en_US","og_type":"article","og_title":"Difference between class component and functional component","og_description":"Difference between class component and functional component - Class-based Components uses ES6 class syntax.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/","og_site_name":"Wikitechy","article_published_time":"2022-03-21T10:20:54+00:00","author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/","name":"Difference between class component and functional component","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"datePublished":"2022-03-21T10:20:54+00:00","dateModified":"2022-03-21T10:20:54+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"Difference between class component and functional component - Class-based Components uses ES6 class syntax.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=3954"}],"version-history":[{"count":1,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3954\/revisions"}],"predecessor-version":[{"id":3955,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/3954\/revisions\/3955"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=3954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=3954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=3954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} | | |