Part 8: Function based component

#2 Minutes Of Reading

In this article I will show you function based component. Functional based component supported in react version 16.8 with react Hook. UseState class from Hook supports functional component in react.Actually, I'm using library(UseState) from Hook but in real Hook support lot of things as library and I will show you as we progress through this course.
Open App.js file and replace class with function shown below. Also, in functional component a function can have function inside (modifyData arrow function).
Code for App.js file available here

Refresh browser window.

Click on modifyData button and refresh browser.

So till now I shown you we can manage state in react component using UseState class in function based component and for class based component Component class is used to manage state of component. There are two types of component stateful component and stateless component.
1. Stateful component: Component managing state with class based or function based called stateful component. Component used in App.js file is stateful component. This is the parent component calling Employee component(child) from employee.js file.
2. Stateless component: Component without state property is called stateless component. Employee component in Employee.js is stateless component.
Stateless component is lightweight as compared to stateful.