This content originally appeared on DEV Community and was authored by Vincent Tong
ReactJS is a javascript library used to build user interfaces.
Understanding the life cycle of a component is fundamental in building user-friendly application.
A react component has 4 major phases: Initializing, Mounting, Updating, & Unmounting.
INITIALIZATION
- The set-up phase where we set the state. It is usually done within the constructor method.MOUNTING
- The process of placing elements onto the DOM.
- This will be the first time an element will be rendered on a page.UPDATING
- occurs whenever there is a change to a component's STATE or PROPS.UNMOUNTING
- As the name implies, this is when a component is REMOVED from the DOM
React Components have methods that, when called, are invoked at certain stages in it's lifecycle. Most of these are optional and for the most part self-explanatory, but serve important functionality.
Lets break it down piece by piece:
INITIALIZATION
- constructor() - (optional**) Similar as using constructor in JS classes, constructor is used the same way in React passing in 'props' as an argument. Within the constructor scope is the invocation of super(props). Calling super will allow us access to variables from the parent class while passing in props will allow us to pass data from one component to another [3]
**Although a constructor() call is technically optional, you will usually want to call it for two reasons:
- to initialize the local state by assigning an object to this.state
- to bind an event handler method to an instance [5]
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
MOUNTING
- getDerivedStateFromProps() - (optional) called before render. Here we can set the state based on the initial props.[1]
- componentWillMount() - (optional) called before render. After this method, the component will get mounted.
- render() - (required) this method is what actually puts our HTML on the page. Once it is run, you will be able to see your component. When changes are made to the props/state this method will be invoked again to re-render the page.
- componentDidMount - (optional) called after render(). can be used to change the state after it has successfully rendered onto the page.
UPDATING
- getDerivedStateFromProps() - (optional) same functionality when used in mounting. see above.
- shouldComponentUpdate() - (optional) returns a boolean. if set to false, the component will not update when a state/prop is changed. If true or not called, it will allow updates to occur. Essentially, this method makes a re-render optional.
- componentWillUpdate() - accepts two arguments: next props and next state. It is called once after shouldComponentUpdate and before a re-render.
- getSnapshotBeforeUpdate - (optional) accepts two arguments: previous props, and previous state. It allows the access to any props and stats before the component was updated. If using this method, you are required to have componentDidUpdate() called as well, otherwise there will be bugs on your app.
- componentDidUpdate() - (optional) called after a component is updated in the DOM [3].
UNMOUNTING
There's only one method that will run when you wish to unmount your component and that is componentWillUnmount()
- componentWillUnmount() - (required) immediately after removing component from DOM, this will invoke. This denotes the end of a component's lifecycle and is required when properly trying to remove a component from the app.
[1] https://www.w3schools.com/react/react_lifecycle.asp
[2] https://www.javatpoint.com/react-constructor#:~:text=The%20constructor%20is%20a%20method,before%20the%20component%20is%20mounted.
[3]https://www.geeksforgeeks.org/whats-the-difference-between-super-and-superprops-in-react/
[4] https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/
[5] https://reactjs.org/docs/react-component.html#:~:text=If%20you%20don't%20initialize,props)%20before%20any%20other%20statement.
This content originally appeared on DEV Community and was authored by Vincent Tong
Vincent Tong | Sciencx (2022-06-12T22:23:29+00:00) React Component Lifecycle. Retrieved from https://www.scien.cx/2022/06/12/react-component-lifecycle/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.