{"id":23399729,"url":"https://github.com/ch0ripain/react-class-based-components","last_synced_at":"2026-04-10T20:53:34.601Z","repository":{"id":266568118,"uuid":"898718322","full_name":"ch0ripain/react-class-based-components","owner":"ch0ripain","description":"🧙‍♂️ React class-based components 🧙‍♂️","archived":false,"fork":false,"pushed_at":"2024-12-10T02:49:46.000Z","size":228,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T19:53:16.855Z","etag":null,"topics":["react","react-class-components","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ch0ripain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-04T22:47:37.000Z","updated_at":"2024-12-10T02:53:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"094facb3-ea14-496c-b920-39ca817f2ada","html_url":"https://github.com/ch0ripain/react-class-based-components","commit_stats":null,"previous_names":["ch0ripain/react-class-based-components"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ch0ripain/react-class-based-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-class-based-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-class-based-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-class-based-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-class-based-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ch0ripain","download_url":"https://codeload.github.com/ch0ripain/react-class-based-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-class-based-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31658964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"ssl_error","status_checked_at":"2026-04-10T17:19:13.364Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-class-components","reactjs"],"created_at":"2024-12-22T10:16:17.347Z","updated_at":"2026-04-10T20:53:34.563Z","avatar_url":"https://github.com/ch0ripain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align='center'\u003e🧙‍♂️ React class-based components 🧙‍♂️\u003c/h1\u003e\n\nClass-based components were used a lot a while ago, more specifically in versions prior to React 16.8. In that version React added hooks and with that a more functional way of working based on functional components.\n\nIn this project I will demonstrate how to translate functional components to class components and also where one can continue using class based components and how to use some class oriented hooks like \u003ccode\u003euseState()\u003c/code\u003e, \u003ccode\u003euseEffect()\u003c/code\u003e, \u003ccode\u003euseContext()\u003c/code\u003e.\n\n## ⚡️Functional component to class-based component\n```javascript\n//Functional\nconst User = (props) =\u003e {\n  return \u003cli className={classes.user}\u003e{props.name}\u003c/li\u003e;\n};\n\n//Class\nimport { Component } from 'react';\nclass User extends Component {\n  constructor(){\n  super()\n  }\n  \n  render (){\n  return \u003cli className={classes.user}\u003e{this.props.name}\u003c/li\u003e;\n  }\n}\n\n//Using a class component is the same thing\n\u003cUser name={user.name} /\u003e\n```\n\n- \u003ccode\u003eComponent\u003c/code\u003e must be imported from React\n- \u003ccode\u003eUser\u003c/code\u003e must \u003ccode\u003eextends Component\u003c/code\u003e ➡️ it allow to use all the methods from the parent (\u003ccode\u003eComponent\u003c/code\u003e)\n- \u003ccode\u003econstructor()\u003c/code\u003e ➡️ enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object.\n- \u003ccode\u003esuper()\u003c/code\u003e ➡️ call the constructor of its parent class to access the parent's properties and methods\n- \u003ccode\u003erender()\u003c/code\u003e ➡️ inherited method that allows to render the value inside\n- \u003ccode\u003ethis\u003c/code\u003e ➡️ to refer our class props context (props are automatically forwarded by react)\n\nIn the example given above the \u003ccode\u003econstructor()\u003c/code\u003e and \u003ccode\u003esuper()\u003c/code\u003e are not really needed because i don't want to provide any custom initialization or change any inherited property like \u003ccode\u003estate\u003c/code\u003e from the parent.\n\n---\n### ⚡️\u003ccode\u003euseState()\u003c/code\u003e\n```javascript\n//Functional\nimport { useState } from 'react';\n\nconst Users = () =\u003e {\n\n  const [showUsers, setShowUsers] = useState(true);\n\n  const toggleUsersHandler = () =\u003e {\n    setShowUsers((curState) =\u003e !curState);\n  };\n\n  return (\n    \u003cdiv className={classes.users}\u003e\n      \u003cbutton onClick={toggleUsersHandler}\u003e\n        {showUsers ? 'Hide' : 'Show'} Users\n      \u003c/button\u003e\n      {showUsers \u0026\u0026 usersList}\n    \u003c/div\u003e\n  )\n\n//Class\nclass Users extends Component {\n  constructor() {\n    super();\n    this.state = { showUsers: true }\n  }\n\n  toggleUsersHandler() {\n    this.setState((prevState) =\u003e {\n      return { showUsers: !prevState.showUsers }\n    })\n  }\n\n  render() {\n  ...\n  return (\n      \u003cdiv className={classes.users}\u003e\n        \u003cbutton onClick={this.toggleUsersHandler.bind(this)}\u003e\n          {this.state.showUsers ? 'Hide' : 'Show'} Users\n        \u003c/button\u003e\n        {this.state.showUsers \u0026\u0026 usersList}\n      \u003c/div\u003e\n    )\n  }\n```\n\nThe changes I need to make to manage state in my class shown above are:\n- \u003ccode\u003ethis.state\u003c/code\u003e ➡️ property inherited from the \u003ccode\u003eComponent\u003c/code\u003e whose value must always be an \u003ccode\u003eObject ➡️ {}\u003c/code\u003e\n- \u003ccode\u003etoggleUsersHandler()\u003c/code\u003e ➡️ as my class method and also using the keyword this to refer my class context\n- \u003ccode\u003ethis.state.showUsers\u003c/code\u003e ➡️ always refer to the state on my class\n- \u003ccode\u003ebind()\u003c/code\u003e ➡️ to pass data as an argument to the function of a class based component for context purposes\n\n\u003e [!NOTE]\n\u003e You can avoid use \"bind\" syntax if you use arrow function syntax instead ➡️ \u003ccode\u003etoggleUsersHandler() = () =\u003e { ... };\u003c/code\u003e\n\nIf you want to know more about bind take a look on these links\n\n[ReactJS-Bind-Method-GG](https://www.geeksforgeeks.org/reactjs-bind-method/)\n\n[ReactJS-Bind-Method-StackOverflow](https://stackoverflow.com/questions/60774235/what-does-bindthis-is-exactly-doing-in-this-example-of-the-react-app#:~:text=%22bind%22%20method%20is%20used%20to,the%20value%20of%20parent%20component.)\n\n---\n### ⚡️\u003ccode\u003euseEffect()\u003c/code\u003e\n```javascript\n//Class\nclass UserFinder extends Component {\n    constructor() {\n        super()\n        this.state = { filteredUsers: DUMMY_USERS, searchTerm: '' }\n    }\n\n    searchChangeHandler(event) {\n        this.setState({ searchTerm: event.target.value })\n    }\n\n    //Loading users when component is rendered\n    componentDidMount() {\n        this.setState({ filteredUsers: DUMMY_USERS })\n    }\n\n    //Updating users with state/props changes\n    componentDidUpdate(prevProps, prevState) {\n        if (prevState.searchTerm !== this.state.searchTerm) {\n            this.setState({ filteredUsers: DUMMY_USERS.filter((user) =\u003e user.name.includes(this.state.searchTerm)) })\n        }\n    }\n\n    render() {...}\n}\n```\nWhen using \u003ccode\u003euseEffect()\u003c/code\u003e on class-based component there are 3 main methods that allow me to handle that hook:\n\n- \u003ccode\u003ecomponentDidMount()\u003c/code\u003e ➡️ equivalent to \u003ccode\u003euseEffect()\u003c/code\u003e without deps, only executed once the component is rendered.\n- \u003ccode\u003ecomponentDidUpdate()\u003c/code\u003e ➡️ equivalent to \u003ccode\u003euseEffect()\u003c/code\u003e with deps, it is executed every time a property or state changes. We also need to manage those changes and what will happen next.\n- \u003ccode\u003ecomponentWillUnmount()\u003c/code\u003e ➡️ equivalent to \u003ccode\u003euseEffect()\u003c/code\u003e cleanup function, executed when the component is unmounted\n\nThis is a example of \u003ccode\u003ecomponentWillUnmount()\u003c/code\u003e\n```javascript\nclass User extends Component {\n  ...\n  componentWillUnmount() {\n    console.log('User component unmounted')\n  }\n  ...\n}\n```\n---\n### ⚡️Using Context in Class-based components\n```javascript\n//First i create my context on my standalone context file\nimport React from 'react';\n\nconst UsersContext = React.createContext({\n    users: []\n});\n\nexport default UsersContext;\n```\n```javascript\n//Then i wrap a parent component in common with all the update state logic\nimport UsersContext from './store/users-context';\n\nfunction App() {\n  const usersContext = {\n    users: DUMMY_USERS\n  }\n\n  return (\n    \u003cUsersContext.Provider value={usersContext}\u003e\n      \u003cUserFinder /\u003e\n    \u003c/UsersContext.Provider\u003e\n  );\n}\n```\n```javascript\n//Last, use the context in the child component i want\nimport UsersContext from '../store/users-context';\nclass UserFinder extends Component {\n    ...\n    //defining context\n    static contextType = UsersContext; //always must be static contextType prop\n    ...\n    //state\n    constructor() {\n        super()\n        this.state = { filteredUsers: [], searchTerm: '' }\n    }\n    ...\n    //using the context\n    componentDidMount() {\n        this.setState({ filteredUsers: this.context.users })\n    }\n```\n---\n### ⚡️Error Boundaries\nThis is probably the main reason to use a class-based component nowadays, as React doesn't support error handling yet (it could barely be implemented using try catch or something like that)\n```javascript\n//Create your error boundary as a class component and handle all error logic within it.\nclass ErrorBoundary extends Component {\n    constructor() {\n        super();\n        this.state = { hasError: false }\n    }\n    \n    componentDidCatch(error) {\n        console.log(error)\n        this.setState({ hasError: true })\n    }\n\n    render() {\n        if (this.state.hasError) {\n            return \u003cp style={{ color: 'red', textAlign: 'center' }}\u003eSomething went wrong D:\u003c/p\u003e\n        }\n        return this.props.children //If no error catched just return the children component value\n    }\n}\n```\n- \u003ccode\u003ecomponentDidCatch()\u003c/code\u003e ➡️ catches exceptions generated in child components.\n\n```javascript\n// Wrap child components where errors should occur\nimport ErrorBoundary from './ErrorBoundary';\n\u003cErrorBoundary\u003e\u003cUsers users={this.state.filteredUsers} /\u003e\u003c/ErrorBoundary\u003e\n\n//Dummy error on Users.js\n  componentDidUpdate() {\n    if (this.props.users.length === 0) {\n      throw new Error('No users provided')\n    }\n  }\n```\nSo if an error occurs in a child component that is wrapped with my error-component boundary class with all the error logic, this would be rendered:\n```javascript\nrender() {\n        if (this.state.hasError) {\n            return \u003cp style={{ color: 'red', textAlign: 'center' }}\u003eSomething went wrong D:\u003c/p\u003e //This message will be seen by the user\n        }\n        return this.props.children\n    }\n```\n---\n\u003cp align=\"center\"\u003e🐸 This project is a practice exercise I learned from the \u003ca href='https://www.udemy.com/course/react-the-complete-guide-incl-redux/?couponCode=ST7MT110524'\u003eAcademind's React Course\u003c/a\u003e 🐸\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-class-based-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fch0ripain%2Freact-class-based-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-class-based-components/lists"}