Class Components in ReactJS
In React you can define components as a function or a class component. Class components are usually thought to have more features than functional components. Classes have lifecycle methods that allows you to dictate when you want to run a particular block of code. The only lifecycle method that is mandatory is the render method. It allows you to return JSX and other elements to the DOM.
A component is a commonly used optional lifecycle method. It can be used to assign states and event handlers. this is one of the drawbacks of class components, functional components allow you to pass props much easier especially for new developers. the class components list of lifecycle methods goes on to include componentdidupdate(), componentdidmount(), componentdidunmount() etc. We’ll leave those for a more in depth lesson. Now lets look at an example of how to define a class component.
Lets compare this to a functional component. Historically functional components did not have the ability to manipulate state and the program lifecycle. But not we have hooks. Hooks like useState and useEffect give us the same functinality as class components. Additionally, functions do not require a render method to return JSX. Let’s look at an example of a function component.
Thanks to hooks we can use functional components which are much simpler to write and debug with the same capabilities as a class components.
Quite frankly I personally stick to functional components and i would recommend the same to any new developer. Both are the same in Reacts’ eyes.Chect out react js for more info:
