Why to use useState in react?

What will happen if we don't use the useState hook in react?
Let's take an example, suppose we want to create a counter button that increments itself by one.

Without useState

In the below code if one tries to increment the counter by clicking on the button the count will not change because the react rendered the component only once and since there is no state change it won't get re-rendered, the count will remain at 0 on-screen.
By console.log one can see that the count is incrementing on click.

import React from "react";

export default function MyComponent() {
  let count = 0;
  const setCount = () => {
  count++;
  console.log(count);
   }
  return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {setCount}>{count}</button>
    </div>
  );
}

With useState

In the below code if one tries to increment the counter by clicking on the button the count will change because the react rendered the component once when it got mounted and since there is state change it will get re-rendered, the count will get incremented on-screen.

import React, { useState } from "react";

export default function MyComponent() {
const[count, setCount] = useState(0);

return (
    <div>
      <label>{count}</label>
      <hr/>
      <label>Counter</label>
      <button onClick = {() => {
        setCount(count + 1);
      }}>{count}</button>
    </div>
  );
}

One can always directly manipulate the DOM and increment the counter on-screen as well, but then there is no point in using react.

Comments

[eerk]

Don't forget the this.state object that is available in class App(). I'm curious about when to use useState and when to use this.state.

[peerreynders]

If you are used to using this.state in class components then useState() in function components can seem a bit magical.

For me Getting Closure on React Hooks made that magic go away.

In class components React manages the component instance specific data that is relevant to rendering in this.state and this.props.

A function component is roughly equivalent to a class component that has been stripped down to its render() method - which is now being used as a standalone function where the props are passed in as the arguments - but there is no equivalent for this.state in a pure function.

That is why function components get access to component instance specific data via React hooks (like useState()) - which make the function impure. But because of how React manages the component instance specific data one has to follow the Rules of Hooks - breaking them can lead to surprising bugs.

[eerk]

Nice explanation! The mysterious part to me is where is the state kept when using useState, if not in the function and not in a class instance... 😎

[peerreynders]

🧁🍨 Mark Dalgleish

@markdalgleish

"With hooks, beginners no longer need to learn about 'this' to avoid shooting themselves in the foot."

Closures:

18:23 PM - 11 Feb 2019

Deep dive: How do React hooks really work? was the version of the article I meant to link to.

[eerk]

this is one of the hardest concepts of javascript for some reason. Getting slightly off-topic here.

[Aastha]

I think when we use function component, we use the hook useState() and when we are using class component we use this.state.
I've never used class component or this.state.

[Aleksei Berezkin]

To get React without useState or state management:

1. Store your data in refs
2. Store DOM elements in refs as well
3. Update both data and DOM in event handlers
4. Well... Do you need React here?

[Aastha]

If one wants to get React without useState or state management go for it , but then there is no point in using react.
For the last point "Well... Do you need React here?"
In the entire post I didn't mention that for DOM manipulation one should use "React", one can use anything according to their use case.

[Harsha190202]

i tried to re-render using setInterval method , even though it is getting rendering the count value is still zero , why is this happening , but while console logging it's getting increased