React.js state object vs useState hook?

Question

I started React by learning about the useState hook to manage component states. However, I have recently discovered that it is possible to use a state object instead. I'm confused, and can't seem to find many references on the internet to help me understand the difference.

What are the differences, if any between the following... And which one is preferred, if at all?

Option 1: State object:

class User extends React.component {

  state = {
    username: 'Tyler'
  }

Option 2: useState hook:

class User extends React.component {

  const [state, setState] = useState({
        username: 'Tyler'
  })

They're not interchangeable, so there's no vs. - useState is for function components, this.state for class components. If you read https://reactjs.org/docs/hooks-state.html, for example, you can see it shows the class then the equivalent function. — jonrsharpe, Jan 05 '21 at 08:33
@jonrsharpe Aah, okay. Straight to the point, thank you very much! — Grateful, Jan 05 '21 at 08:34
Does this answer your question? [React Function Components with hooks vs Class Components](https://stackoverflow.com/questions/53062732/react-function-components-with-hooks-vs-class-components) — jonrsharpe, Jan 05 '21 at 08:38
@jonrsharpe No, buddy. That wasn't my question. I prefer your first link, it explains it nicely for me. — Grateful, Jan 05 '21 at 08:49
You have a FAQ section in React docs: https://reactjs.org/docs/hooks-faq.html#what-can-i-do-with-hooks-that-i-couldnt-with-classes — Dennis Vash, Jan 05 '21 at 08:50
We can't close as a dupe of the docs, though, and that covers the broader topic. — jonrsharpe, Jan 05 '21 at 08:51
@jonrsharpe Sure... But you have to understand that newbies will sometimes be put off with and avoid "larger than life" and generalised questions. They prefer ones that are direct and simple. In your suggested "dupe", the assumption has been made that the questioner already understands that there are differences between "hooks vs class components". In this case, the assumption has not been made. — Grateful, Jan 05 '21 at 08:58

score 3 · Accepted Answer · edited Jan 06 '21 at 07:03

So, there is a bit of misunderstanding here.

State Object, or this.state was used when React used classes.

This approach had some downsides. React needed to add a lot stuff to the object(when class is initialized) to make it compatible to react.

Hence since React 16 or so, it added the ability to using functions as building blocks for the application. The older approach(using classes) stil works, but not encouraged. Classes does have some additional functionality as of this moment (https://reactjs.org/docs/hooks-faq.html#do-hooks-cover-all-use-cases-for-classes). Error Boundary (https://reactjs.org/docs/error-boundaries.html) is one such thing.

Before 16, functions could be used as components, but didn't have state. With Hooks, the functions could have state as well.

This does come with some restrictions and how-tos in regards to usage(https://reactjs.org/docs/hooks-rules.html)

The best resource on hooks is the docs from react on the subject.

The last, probably most important pro is that the code is cleaner.

P.S. the second example won't work, useState has to be within a function defn.

// Option 2: useState 
function User() {
  const [state, setState] = useState({
    username: 'Tyler'
  })
}

Note it didn't so much "move to" functions, as "add the option to use" them - class components still work just fine. — jonrsharpe, Jan 05 '21 at 08:45

score 2 · Answer 2 · edited Jan 05 '21 at 08:45

useState is part of a whole new concept in React (16.8+), that's called hooks. Hooks are a more efficient and simple way to write in React.

Hooks solve pain points:

Managing State: Reusing logic between multiple components can lead to wrapper hell or deeply nested components.

Side Effects: Unrelated mixed in logic in lifecycle methods can get repetitive, and cause unnecessary side effects.

Optimization: Hooks might reduce your bundle size.

Please read all in here: https://medium.com/better-programming/react-hooks-vs-classes-add2676a32f2

React.js state object vs useState hook?

2 Answers2