What's the purpose of a React Functional Component when it can be used to modify state?

user_147530 0
Viewed 38

I am new to React and learning it. From this link:

There are mainly two components in React:

  • Functional Components also known as Stateless component
  • Class Component also known as Stateful component

and it seems that functional components are the rage these days e.g., I inherited some code and it uses functional components everywhere. The same article is then saying:

... a functional component is just a plain JavaScript function, we cannot use setState() method inside component. That’s why they also get called functional stateless components. ... useState can be used to store state in a functional component.

and I do see tons of code using useState in functional components to modify state. Can someone explain this to me?

reactjs
1 Answers

Answering my own question.

Functional components were referred to as stateless components but its no longer correct to think of them as stateless. This link from official documentation explains it:

You might have previously known these as “stateless components”. We’re now introducing the ability to use React state from these, so we prefer the name “function components”.

To answer the second part of the question, functional components are indeed the rage these days because that's the official guidance and recommendation. From this page:

In the longer term, we expect Hooks to be the primary way people write React components.

Also see this page for some background and comparison of class components vs. functional components.

user_1475300
Related