React offers two types of components that offer ample flexibility for all use cases. These are given below:

  • Class Component: A class component is subclassed from the component class in React. A class component offers several out-of-the-box features. For instance, they let you store the local state. They also allow you to create lifecycle hooks, which will be covered later in the course. 
  • Function Component: This is the second type of component that you can build using React.  These are simple functions that return a React element. They can also bring in a props object as an argument.  According to React’s official documents, the most fundamental way to define a component is by writing a JavaScript function. A function component is a presentational component, which allows you to accept data through a prop and render it on the UI.  These are suitable for separating visuals from container components where your logic and state may reside.

How to choose between class and function components  

Although class components, as a syntax, is still in use, function components, coupled with the super-powerful Hooks API, offer a cleaner and simpler syntax in the long run and are probably a better choice. Your code is more readable and easier to test. Having said that, you can still use class components, and we will use them throughout this course in conjunction with function components. 

Note: Class components offer built-in support for Local state & lifecycle methods.