{"id":3954,"date":"2022-03-21T10:20:54","date_gmt":"2022-03-21T10:20:54","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=3954"},"modified":"2022-03-21T10:20:54","modified_gmt":"2022-03-21T10:20:54","slug":"difference-between-class-component-and-functional-component","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/","title":{"rendered":"Difference between class component and functional component"},"content":{"rendered":"\n\n\n\n\n\n\n\n\n\n\n\n
\u00a0<\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Class component<\/strong><\/td>\n

\u00a0<\/p>\n

Functional component<\/strong><\/td>\n<\/tr>\n

\u00a0Class-based Components uses ES6 class syntax.<\/td>\nFunctional Components are simpler comparing to class-based functions.<\/p>\n

\u00a0<\/td>\n<\/tr>\n

The lifecycle methods can be used.<\/td>\nFunctional Components mainly focuses on the UI of the application, not on the behavior.<\/td>\n<\/tr>\n
More code to write.<\/td>\nEasy to write.<\/td>\n<\/tr>\n
Used for presenting static data.<\/td>\nUsed for dynamic source of data.<\/td>\n<\/tr>\n
Can\u2019t handle fetching data.<\/td>\nHandles any data that might change.<\/td>\n<\/tr>\n
It must have a render() method.<\/td>\nIt doesn\u2019t have a render() method.<\/td>\n<\/tr>\n
Here,React lifecycle methods (like componentDidMount, etc.) are used<\/td>\nReact hooks are there to be as a better alternative to the traditional React lifecycle methods.<\/td>\n<\/tr>\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

\u00a0<\/td>\n<\/tr>\n

In functional components to make them Stateful, Hooks can be easily used.<\/td>\nIn class component to implement hooks,It requires different syntax.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0<\/p>\n

\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"

\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Class component \u00a0 Functional component \u00a0Class-based Components uses ES6 class syntax. Functional Components are simpler comparing to class-based functions. \u00a0 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":{"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":"\nDifference 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\":\"Article\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/difference-between-class-component-and-functional-component\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/difference-between-class-component-and-functional-component\\\/\"},\"author\":{\"name\":\"webmaster\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"headline\":\"Difference between class component and functional component\",\"datePublished\":\"2022-03-21T10:20:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/difference-between-class-component-and-functional-component\\\/\"},\"wordCount\":158,\"commentCount\":0,\"keywords\":[\"are functional components faster than class components\",\"class component react\",\"Components and Props\",\"difference between class component and functional component in react\",\"Differences between Functional Components\",\"functional component to class component\",\"Functional Components vs. Class Components in React.js\",\"Functional Components Vs. Class Components in ReactJS\",\"functional vs class components react\",\"Functional vs Class-Components in React\",\"react class component example\",\"React Class Component vs Functional Component\",\"react functional component\",\"react pure functional component\",\"why functional components are better\"],\"articleSection\":[\"ReactJS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/reactjs\\\/difference-between-class-component-and-functional-component\\\/#respond\"]}]},{\"@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\",\"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\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"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:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"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":"Article","@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/#article","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/"},"author":{"name":"webmaster","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"headline":"Difference between class component and functional component","datePublished":"2022-03-21T10:20:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/"},"wordCount":158,"commentCount":0,"keywords":["are functional components faster than class components","class component react","Components and Props","difference between class component and functional component in react","Differences between Functional Components","functional component to class component","Functional Components vs. Class Components in React.js","Functional Components Vs. Class Components in ReactJS","functional vs class components react","Functional vs Class-Components in React","react class component example","React Class Component vs Functional Component","react functional component","react pure functional component","why functional components are better"],"articleSection":["ReactJS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wikitechy.com\/interview-questions\/reactjs\/difference-between-class-component-and-functional-component\/#respond"]}]},{"@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","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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"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:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","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}]}}