{"id":18688662,"url":"https://github.com/mian-ali/react-lifecycle-methods","last_synced_at":"2025-09-11T10:40:55.973Z","repository":{"id":104243939,"uuid":"462843432","full_name":"mian-ali/React-lifecycle-methods","owner":"mian-ali","description":"The Component Lifecycle","archived":false,"fork":false,"pushed_at":"2022-02-23T17:49:53.000Z","size":20,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-28T01:25:17.169Z","etag":null,"topics":["component","lifecycle","lifecycle-components","methods","react","react-lifecycle","reactjs"],"latest_commit_sha":null,"homepage":"https://gist.github.com/mian-ali/bec8986c0dc2b02a9bc86b802bae0ecb","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mian-ali.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-02-23T17:43:17.000Z","updated_at":"2022-06-22T19:00:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"37977b5b-0c0a-42bc-8af4-39d172e5056b","html_url":"https://github.com/mian-ali/React-lifecycle-methods","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mian-ali%2FReact-lifecycle-methods","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mian-ali%2FReact-lifecycle-methods/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mian-ali%2FReact-lifecycle-methods/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mian-ali%2FReact-lifecycle-methods/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mian-ali","download_url":"https://codeload.github.com/mian-ali/React-lifecycle-methods/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239549040,"owners_count":19657516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["component","lifecycle","lifecycle-components","methods","react","react-lifecycle","reactjs"],"created_at":"2024-11-07T10:37:44.127Z","updated_at":"2025-02-18T20:43:06.367Z","avatar_url":"https://github.com/mian-ali.png","language":null,"readme":"\n# The Component Lifecycle\n Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.\n The three phases are: Mounting, Updating, and Unmounting.\n\n ## The component lifecycle goes through the following phase\n \n- Mounting\n- Updating\n- Unmounting\n\n## Mounting\nThe component rendered to the DOM for the first time. This is called mounting. These methods are called in the following order when an instance of a component is being created and inserted into the DOM.\n\n- constructor()\n- static getDerivedStateFromProps() rarely case use\n- render()\n- componentDidMount()\n\n## Updating\nAn update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered\n\n- static getDerivedStateFromProps() rarely case use\n- shouldComponentUpdate() rarely case use\n- render()\n- getSnapshotBeforeUpdate() rarely case use\n- componentDidUpdate()\n\n## Unmounting\nWhen component removed from DOM. This is called unmounting. Below method is called in this phase.\n\n- componentWillUnmount()\n\n## Component Lifecycle Diagram\n\n![lifecycle-diagram](https://user-images.githubusercontent.com/69896600/155375420-5630aeec-f66f-445a-a45d-c75717b2efea.png)\n\n\n\n# Lifecycle Methods\n\n## constructor()\nThe constructor for a React component is called before it is mounted. The constructor call only once in whole lifecycle. You and set initial value for this component.\n\nConstructors are only used for two purposes 1. Initializing local state by assigning an object to this.state 2. Binding event handler methods to an instance.\n\n```javascript\nconstructor(props){\n\tsuper(props);\n\tthis.state = {qty: this.props.qty}\n\tthis.clickHandling = this.clickHandling.bind(this);\n}\n```\n\n## static getDerivedStateFromProps()\n\nIt is invoked before calling render method. This method is used when state depends on props, whenever props is changed, then state automatically will be changed. getDerivedStateFromProps method use for both phase mounting and updating of the component. If null is returned then nothing is changed in the state.\n\n```javascript\n\nstatic getDerivedStateFromProps(props, state) {\n\tif(props.qty !== state.qty) {\n\t  return {qty: props.qty}\n\t}\n\treturn null;\n}\n\n```\n## render()\n\nThis method is the only required method in a class component. The render() function should be pure, meaning that it does not modify component state, which means it returns the same output each time it’s invoked.\n\n```javascript\n\n\nrender(){\n    return(\n      \u003cdiv\u003e\n        \u003ch2\u003eCart Items ({this.state.qty})\u003c/h2\u003e\n      \u003c/div\u003e\n    )\n  }\n\n}\n\n```\n## componentDidMount()\nThis is invoked immediately after the component is mounted. If you load data using api then it right place for request data using api.\n\n```javascript\ncomponentDidMount() {\n    console.log('Execute this method after component render');\n}\n```\n\n## shouldComponentUpdate()\nThis is invoked before rendering when new props or state are being received. This methods return true or false according the component re-render or skipped. By default, this method returns true. This method is not called for the initial render.\n\n```javascript\n\nshouldComponentUpdate(nextProps, nextState) {\n    if(this.props.qty !== nextProps.qty) {\n      console.log('should component update');\n      return true;\n    }\n    return false;\n}\n\n```\n## componentDidUpdate()\nThis method immediately executed on the DOM when the component has been updated. Update occurs by changing state and props. This method is not called for the initial render. This is a good place for compare the current props to previous props.\n\n```javascript\n\n\ncomponentDidUpdate(prevProps, prevState){\n    if(this.props.productId !== prevProps.productId){\n      console.log('component updated');\n    }\n}\n\n\n```\n\n## componentWillUnmount()\nThis method immediately executed when the component is unmounted and destroy from the DOM. Means this method is called when a component is being removed from the DOM.\n\n```javascript\n\n\ncomponentDidUpdate(prevProps, prevState){\n    if(this.props.productId !== prevProps.productId){\n      console.log('component updated');\n    }\n}\n\n\n```\nPosted By: @mian-ali `(Ali Ahmad)`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmian-ali%2Freact-lifecycle-methods","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmian-ali%2Freact-lifecycle-methods","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmian-ali%2Freact-lifecycle-methods/lists"}