{"id":56,"date":"2025-01-21T04:58:51","date_gmt":"2025-01-21T04:58:51","guid":{"rendered":"https:\/\/techkubo.com\/react\/?p=56"},"modified":"2025-05-19T08:27:37","modified_gmt":"2025-05-19T08:27:37","slug":"react-class-components","status":"publish","type":"post","link":"https:\/\/techkubo.com\/react\/react-class-components\/","title":{"rendered":"React Class Components"},"content":{"rendered":"\n

Before React 16.8, class components were the primary way to manage state and lifecycle in React. With Hooks, function components now offer similar capabilities. While function components are preferred, class components remain a valid option and are not being removed.<\/p>\n\n\n\n

<\/p>\n\n\n\n

React Components<\/h2>\n\n\n\n

React components are reusable, independent pieces of code that return HTML via the render()<\/code> method. Components can be class or function components. This chapter focuses on class components.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Defining a React Class Component<\/h2>\n\n\n\n

To create a class component, you extend React.Component<\/code>. In this example, the Hello<\/code> component extends React.Component<\/code> and uses the render<\/code> method to return JSX. JSX allows you to write HTML-like syntax within your JavaScript code.:<\/p>\n\n\n\n

class Hello extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}!<\/h1>;\n  }\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Using Props in Class Components<\/h2>\n\n\n\n
Props allow you to pass data between components. Here’s a simple example of using props in a class component.<\/p>\n\n\n\n
In the Welcome<\/code> component, this.props.username<\/code> accesses the username<\/code> prop passed to the component.<\/p>\n\n\n\n
class Welcome extends React.Component {\n  render() {\n    return <h2>Welcome, {this.props.username}!<\/h2>;\n  }\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Managing State in Class Components<\/h2>\n\n\n\n
State allows a component to create and manage its own data. When the state changes, the component re-renders. Here\u2019s a simplified example of using state in a class component.<\/p>\n\n\n\n
In this example, the Counter<\/code> component has a state object with a count<\/code> property. The increment<\/code> method updates the state, causing the component to re-render and show the new count.:<\/p>\n\n\n\n
class Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <p>Count: {this.state.count}<\/p>\n        <button onClick={this.increment}>Increment<\/button>\n      <\/div>\n    );\n  }\n}<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Lifecycle Methods in Class Components<\/h2>\n\n\n\n
React class components have several lifecycle methods that allow you to run code at specific stages of a component’s life. Common lifecycle methods include:<\/p>\n\n\n\n
    \n
  • componentDidMount()<\/code>: Runs after the component is first rendered.<\/li>\n\n\n\n
  • componentDidUpdate(prevProps, prevState)<\/code>: Runs after the component updates.<\/li>\n\n\n\n
  • componentWillUnmount()<\/code>: Runs just before the component is removed from the DOM.<\/li>\n<\/ul>\n\n\n\n
    In the Timer<\/code> component, componentDidMount<\/code> sets up a timer to call the tick<\/code> method every second, updating the state. componentWillUnmount<\/code> clears the timer when the component is removed from the DOM.:<\/p>\n\n\n\n
    class Timer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { seconds: 0 };\n  }\n\n  tick = () => {\n    this.setState((state) => ({\n      seconds: state.seconds + 1,\n    }));\n  };\n\n  componentDidMount() {\n    this.interval = setInterval(this.tick, 1000);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.interval);\n  }\n\n  render() {\n    return <div>Seconds: {this.state.seconds}<\/div>;\n  }\n}<\/pre><\/div>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    Before React 16.8, class components were the primary way to manage state and lifecycle in React. With Hooks, function components […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-56","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nReact Class Components - React Tutorial<\/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:\/\/techkubo.com\/react\/react-class-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Class Components - React Tutorial\" \/>\n<meta property=\"og:description\" content=\"Before React 16.8, class components were the primary way to manage state and lifecycle in React. With Hooks, function components […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/techkubo.com\/react\/react-class-components\/\" \/>\n<meta property=\"og:site_name\" content=\"React Tutorial\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-21T04:58:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-19T08:27:37+00:00\" \/>\n<meta name=\"author\" content=\"Manong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manong\" \/>\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:\/\/techkubo.com\/react\/react-class-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-class-components\/\"},\"author\":{\"name\":\"Manong\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\"},\"headline\":\"React Class Components\",\"datePublished\":\"2025-01-21T04:58:51+00:00\",\"dateModified\":\"2025-05-19T08:27:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-class-components\/\"},\"wordCount\":283,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/techkubo.com\/react\/react-class-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/techkubo.com\/react\/react-class-components\/\",\"url\":\"https:\/\/techkubo.com\/react\/react-class-components\/\",\"name\":\"React Class Components - React Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/techkubo.com\/react\/#website\"},\"datePublished\":\"2025-01-21T04:58:51+00:00\",\"dateModified\":\"2025-05-19T08:27:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/techkubo.com\/react\/react-class-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/techkubo.com\/react\/react-class-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/techkubo.com\/react\/react-class-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/techkubo.com\/react\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Class Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/techkubo.com\/react\/#website\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"name\":\"React Tutorial\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/techkubo.com\/react\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/techkubo.com\/react\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/techkubo.com\/react\/#organization\",\"name\":\"React Tutorial\",\"url\":\"https:\/\/techkubo.com\/react\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"contentUrl\":\"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png\",\"width\":300,\"height\":220,\"caption\":\"React Tutorial\"},\"image\":{\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965\",\"name\":\"Manong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g\",\"caption\":\"Manong\"},\"sameAs\":[\"https:\/\/techkubo.com\"],\"url\":\"https:\/\/techkubo.com\/react\/author\/manong\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Class Components - React Tutorial","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:\/\/techkubo.com\/react\/react-class-components\/","og_locale":"en_US","og_type":"article","og_title":"React Class Components - React Tutorial","og_description":"Before React 16.8, class components were the primary way to manage state and lifecycle in React. With Hooks, function components […]","og_url":"https:\/\/techkubo.com\/react\/react-class-components\/","og_site_name":"React Tutorial","article_published_time":"2025-01-21T04:58:51+00:00","article_modified_time":"2025-05-19T08:27:37+00:00","author":"Manong","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Manong","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/techkubo.com\/react\/react-class-components\/#article","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/react-class-components\/"},"author":{"name":"Manong","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965"},"headline":"React Class Components","datePublished":"2025-01-21T04:58:51+00:00","dateModified":"2025-05-19T08:27:37+00:00","mainEntityOfPage":{"@id":"https:\/\/techkubo.com\/react\/react-class-components\/"},"wordCount":283,"commentCount":0,"publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/techkubo.com\/react\/react-class-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/techkubo.com\/react\/react-class-components\/","url":"https:\/\/techkubo.com\/react\/react-class-components\/","name":"React Class Components - React Tutorial","isPartOf":{"@id":"https:\/\/techkubo.com\/react\/#website"},"datePublished":"2025-01-21T04:58:51+00:00","dateModified":"2025-05-19T08:27:37+00:00","breadcrumb":{"@id":"https:\/\/techkubo.com\/react\/react-class-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/techkubo.com\/react\/react-class-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/techkubo.com\/react\/react-class-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/techkubo.com\/react\/"},{"@type":"ListItem","position":2,"name":"React Class Components"}]},{"@type":"WebSite","@id":"https:\/\/techkubo.com\/react\/#website","url":"https:\/\/techkubo.com\/react\/","name":"React Tutorial","description":"","publisher":{"@id":"https:\/\/techkubo.com\/react\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/techkubo.com\/react\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/techkubo.com\/react\/#organization","name":"React Tutorial","url":"https:\/\/techkubo.com\/react\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/","url":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","contentUrl":"https:\/\/techkubo.com\/react\/wp-content\/uploads\/sites\/10\/2025\/04\/cropped-cropped-Techkubo-logo-1-300x220-1.png","width":300,"height":220,"caption":"React Tutorial"},"image":{"@id":"https:\/\/techkubo.com\/react\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/b4fa2f01fa4ff2a4e98276ce47115965","name":"Manong","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/techkubo.com\/react\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/21a7455736c21887b8fefe0935012d65?s=96&d=mm&r=g","caption":"Manong"},"sameAs":["https:\/\/techkubo.com"],"url":"https:\/\/techkubo.com\/react\/author\/manong\/"}]}},"_links":{"self":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/56"}],"collection":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/comments?post=56"}],"version-history":[{"count":2,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/56\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/posts\/56\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/media?parent=56"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/categories?post=56"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techkubo.com\/react\/wp-json\/wp\/v2\/tags?post=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}