This content originally appeared on DEV Community and was authored by steviepee
What is React? React is an open-source, component-based front end library responsible for the view layer of (an) application.1
What are components? React dev itself defies components as the base class for the React components defined as JavaScript classes.4 A more human definition, though, could be that they are all the little pieces that make up a web page
component life cycle: A component's Lifecycle is defined as the series of methods that are invoked in different stages of the component’s existence2 Most developers would say that a React component's life cycle has four stages (which is technically true, the best kind of true), but if you boil it down, each component pretty much lives life much like we do: They're born, they learn, they die.
[Note: There are two ways to syntactically refer to React components, those being class-based and functional components. Current good practices, and React itself for that matter, would recommend defining components as functions instead of classes4, but many legacy systems refer to components as classes. Further, the class structure more directly refers to the component's status and life cycle stages, so we'll be opting for class structure. Just for now.]
They're Born:
1.initialization phase.
According to javatpoint.com, this phase*is the birth phase of the
lifecycle of a ReactJS component.1, but it works like more of a pre-
natal phase, as this is the phase where *... a component contains the
default Props and initial State1**, gaining traits in-digital-utero
that will be used after its birth into the DOM.
These are some methods that are utilized at this stage of life:
- static defaultProps():previously getDefaultProps()es5 It is used to specify the default value of this.props. It is invoked before the creation of the component or any props from the parent is passed into it.(1)
class MyComponent extends React.Component {
static defaultProps = {
name: 'Jack',
age: 35
};
initialState(): *previously getInitialState()es5
It is used to specify the default value of this.state. It is invoked before the creation of the component.(1) We may also use the ES6 class Constructor() method in the component's creation, much like any other class instantiation.
class Clock extends React.Component {
constructor(props)
{
// Calling the constructor of
// Parent Class React.Component
super(props);
this.state = { date : new Date()/*initial state*/ };
}
}
2.mounting phase.
Now, here's where the real life begins! This is the phase when the component is rendered for the first time, added to the DOM, and ready to see the world. At this point of the life cycle, we tend to use methods like, of course, render(), which is invoked to examine this.props and this.state and return one of the following types: React elements, Arrays and fragments, Booleans or null, String and Number. and may (be) call(ed) at any moment and many moments, not just at mounting time. Also, we can use componentDidMount(), which sounds a little like a first birthday, but is really a method ** invoked after the initial mounting of the component in the DOM tree. It's a great place to call API endpoints and to do network requests.3**. Here is the method in action, curtesy of tutorialspoint.com:
componentDidMount() {
this.timeFn = setInterval( () => this.setTime(), 1000);
}
In this example, the component(a clock, in this case,) is set to update its time every second right after it is first rendered.
They Learn:
From here on in, they'll live a life kind of like ours: Lauding their achievements, questioning their decisions, remembering their past, and re-rendering as many times as their environment requires. This may sound poetic, but React seems to have that way about it. You see, React follows a default procedure in the Naming Conventions of these predefined functions where the functions containing “Will” represents before some specific phase and “Did” represents after the completion of that phase2, not to mention "Should", usually before a life-rendering change is at hand. GeeksforGeeks depicts a great snippet of the component life cycle, with these Conventions presenting throughout:
import React from "react";
import ReactDOM from "react-dom/client";
class Test extends React.Component {
constructor(props) {
super(props);
this.state = { hello: "World!" };
}
componentDidMount() {
console.log("componentDidMount()");
}
changeState() {/*sets a new state for the component*/
this.setState({ hello: "Geek!" });
}
render() {
return (
<div>
<h1>
GeeksForGeeks.org, Hello
{this.state.hello}
</h1>
<h2>
<a
onClick={this.changeState.bind(
this
)}
>
Press Here!
</a>
</h2>
</div>
);
}
shouldComponentUpdate(nextProps, nextState) {/*checks for a change in props. If there is one, the method will return true and the component will render again with the new information*/
console.log("shouldComponentUpdate()");
return true;
}
componentDidUpdate() {
console.log("componentDidUpdate()");
}
}
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render();
As you can see, React facilitates a component life cycle with the potential for many dynamic changes based on environment and needs in a cogent and understandable phrasing structure.
They Die:
- A component's death and its birth have one thing in common: they can only happen once. Once a component is unmounted, it cannot be re-mounted. Because of this, React includes some clean-up procedures to get the component's house in order before its final moments. The componentWillUnmount() method is good for performing cleanup tasks before a component is unmounted. Its duties include: Canceling network requests, clearing timers, removing event listeners, an cleaning up subscriptions. this is a highly recommended option in order to avoid side effects, bugs, and memory leaks.Note: this should be done after the componentDidMount() method and mirror it, and invoked just before unmountComponentFromNode(). Kind of like writing a will, it sets up cleanup for anything the component gains control of in life.
Moving through the path of a component's life cycle is a very useful way to get into seeing the ins and outs of how React works. I hope that likening the lives of these components to our own has aided in your understanding of the environment React provides, as well as an appreciation for the Great Cycle of Life. Until we mount again!
References:
1.https://www.javatpoint.com/react-component-life-cycle
2.https://www.geeksforgeeks.org/reactjs-lifecycle-components/
3.https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm
4.https://react.dev/reference/react/Component
5.https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
This content originally appeared on DEV Community and was authored by steviepee
steviepee | Sciencx (2024-11-12T15:43:18+00:00) React Components: The Cycle of Life. Retrieved from https://www.scien.cx/2024/11/12/react-components-the-cycle-of-life/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.