Way to Functional components
Before getting into the functional components lets have a basic idea on how things now flow in react.
Earlier both React.js and React-native used mostly class components. It’s a Stateful component where state keeps the data we import. Basically class component is a JavaScript class that extends from React component.
Ex:-
We can divide class component life cycle into 4 sections. (As per the documentation)
- Mounting
- Updating
- Unmounting
- Error
Mounted — When an instance of a component is being created and inserted into the DOM.
Following methods will call in this section.
Updating — Changes to props or state will re-rendered the Component.
Following methods will call in this section.
- static getDerivedStateFromProps() — Rarely Used
- shouldComponentUpdate() — Rarely Used
- render()
- getSnapshotBeforeUpdate() — Rarely Used
- componentDidUpdate()
Unmounting— When a component is being removed from the DOM.
Following method will call in this section.
Error— Error during rendering, in a lifecycle method, or in the constructor of any child component.
Following methods will call in this section.
- static getDerivedStateFromError() — Rarely Used
- componentDidCatch() — Rarely Used
From above details you can get an idea how class component lifecycle methods works. For more details you can visit the official website.
OK. Now what is Functional component ??
It’s a stateless plain JavaScript functions that take props and returns an react element (JSX).
As per the above example you can see how easy to write functional component with less code. So I have mentioned functional component is a stateless component. That means it does not have any state or lifecycle methods. Now someone can ask are there anyway to use state in functional components. The answer is yes. But how? Because if we want to use state then we need to use class. No worries this is why react-hooks introduce by react by Facebook.
As per the official website — React-Hooks let you use state and other React features without writing a class.
From React 16.8.x and React-native 0.59.x onwards you can use react-hooks in your development. This means react forced to use functional components rather that using class components. But keep in mind class components are still exist in react for a reason. We cannot always use functional components because of some few reasons. This article will describe it well.
There are several types of hooks that we can use in our functional component
** equivalent class component lifecycle method for useState is setState()
** equivalent class component lifecycle methods for useEffect is componentDidUpdate(), componentDidMount(), componentWillUnmount()
Let’s talk about more details on hooks with another article later. In this article my main goal is to give the basic comparison in class component and functional component.
What are the pros and cons in functional components?
Pros:-
- Less code more work -
Above Example 1 and Example 2 code snippets clearly proves the less code in functional component. - Easy to test and debug -
Like class component functional component does not have state and it only relays on given props. When changing the component you do not need to worry about the state. So you can easily test and debug the code without always using consloe.log() or debugger points. - High readability -
This is actually depends on the less code. Less code definitely increase the readability of the code. Functional component use plain JavaScript code. Even new developers can read the code easily.
Cons:-
Actually there aren’t any big cons that I have found So far.
If you are trying to move functional component to get more performance then there is no point. Because there aren’t much performance improvement in functional components.
Finally my opinion is to use functional components as much as possible in new applications because it gives more benefits to the developers :-)
If there any suggestions or improvement related to this article kindly welcome.
