React: Would a function component that uses useState hooks be considered as stateful component?

#1

Hello,

Would a component of type

function App() {
   const { state,  setState } = React.useState()

   return (
       [...]
   )
}

be considered as a stateful component by the definition? Or would be still a stateless functional component since it does not extend React.Component explicitly and does not declare a state with passing super(props)?

Best regards,
Konstantin

#2

It is a stateful functional component. According to the docs, useState “[r]eturns a stateful value, and a function to update it.”

Of course, we could quibble - Is it the component that is stateful or the value. And I notice that that useState function is going to be run every time the component renders - there must be something under the hood that tracks that value and its setter, some store somewhere.

I don’t know what the strict definition is. Is it stateful? Does it mimic being stateful but reloading the stateful value on each render? I don’t know, I’m not smart enough. I do see that some people are referring to them as “stateful components” online - that sounds good enough for me.

To make matters a little confusing, many of us refer to functional components as SFCs - stateless functional components. What is the abbreviation for stateful functional components?

1 Like
#3

I’m fairly sure this works by making functional components a closure, where useState comes from the closure’s captured scope. And yes, it’s very much a stateful component, it’s just syntax sugar using static closures instead of classes.

1 Like
#4

It appears you may be right. This guy seems to agree. Interesting stuff.

#5

The venerable master Qc Na was walking with his student, Anton. Hoping to
prompt the master into a discussion, Anton said “Master, I have heard that
objects are a very good thing - is this true?” Qc Na looked pityingly at
his student and replied, “Foolish pupil - objects are merely a poor man’s
closures.”

Chastised, Anton took his leave from his master and returned to his cell,
intent on studying closures. He carefully read the entire “Lambda: The
Ultimate…” series of papers and its cousins, and implemented a small
Scheme interpreter with a closure-based object system. He learned much, and
looked forward to informing his master of his progress.

On his next walk with Qc Na, Anton attempted to impress his master by
saying “Master, I have diligently studied the matter, and now understand
that objects are truly a poor man’s closures.” Qc Na responded by hitting
Anton with his stick, saying “When will you learn? Closures are a poor man’s
object.” At that moment, Anton became enlightened.

The distinction is fairly arbitrary. And class-syntax-based components work in the same way under the hood (though the hooks-based syntax is closer visually to how they/ components work internally)

1 Like