---
title: "Discussion on \"A Look at React Hooks: useState\" | Hashnode"
description: "Discussion on \"A Look at React Hooks: useState\". Welcome to A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at the useState Hook.\nWhat is useState?\nThis Hook is probably the most commonly used Hook. It allows us to declare, read and update a state varia..."
url: "https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [A Look at React Hooks: useState](https://blog.lo-victoria.com/a-look-at-react-hooks-usestate?utm_source=hashnode&utm_medium=feed)

Welcome to A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at the useState Hook. What is useState? This Hook is probably the most commonly used Hook. It allows us to declare, read and update a state varia...

Feb 15, 2021 · 6 min read · blog.lo-victoria.com  
Updated Oct 9, 2021  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#beginners](https://hashnode.com/tag/beginners)
-   [#web-development](https://hashnode.com/tag/web-development)
-   [#tutorial](https://hashnode.com/tag/tutorial)
-   [#reacthooks](https://hashnode.com/tag/reacthooks)

## Written by

[Victoria Lo](https://hashnode.com/@victoria)

@victoria · Singapore

  
[View profile](https://hashnode.com/@victoria)

A nerd in books, tea, games and software.

I'm a solutions engineer lead, GitHub Star, Director of WomenDevsSG, and co founder of ragTech. I work at the intersection of tech, systems, and leadership, and this blog is where I share my journey through all three. Expect honest reflections, real experiences, and thoughts that are still forming rather than polished career advice.

## Responses 4

Markdown supported · ⌘↵ to post

[mahi kaushik](https://hashnode.com/@mahikaushik)

[Mar 28, 2023](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/6422aba28d34a489101aa49f)

"Great article! As a junior developer at a software agency with less than two years of experience, I found your explanation of how useState works to be very helpful. You've presented the topic clearly and concisely, making it easy for beginners like myself to understand. I appreciate the code examples you provided as they allowed me to see how to implement this hook in my projects. For those who want to learn more about using useState, I recommend checking out this React usestate blog, which specifically focuses on this topic. It covers how to use useState effectively and provides practical examples of how to implement it. I think it would be a great complement to this article. Thanks again for sharing your insights. I'm looking forward to reading more of your articles on React Hooks!" [copycat.dev/blog/react-usestate-hook](https://www.copycat.dev/blog/react-usestate-hook/)

[Muhammad Ilham Robani](https://hashnode.com/@hamko)

[Jun 12, 2022](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/62a60bb2165482d2b3eee7bf)

Hi Victoria, from what i see in your article about useState hook, you often use a function that returns updated state value rather than directly write the updated value as an argument. if that sounds confusing, let me direct it with an example:

1.  setMyArray(myArray=> (\[...myArray, 'c'\]))

instead of just this:

1.  setMyArray(\[...myArray, 'c'\])

my question is, is that necessary to do so? i'm sorry if my question sounds stupid to you, but i am kind of new to programming. best regards, Ilham.

[Victoria Lo](https://hashnode.com/@victoria)

[Jun 13, 2022](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/62a60bb2165482d2b3eee7bf#reply-62a694be165482d2b3eef8bb)

Hi [Muhammad Ilham Robani](https://hashnode.com/@hamko), yes this is highly recommended as for states that are constantly being updated, using the wrapper around it will ensure that React is updating the current state value and prevent unexpected behaviour.

[Edidiong Asikpo (Didi)](https://hashnode.com/@didicodes)

[Feb 16, 2021](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/602bab9dcc91ac05270efb59)

Hey [Victoria Lo](https://hashnode.com/@victoria). I really enjoyed reading the second article of this series, and I am looking forward to the third one.

I have a question for you. 😀

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613474505615/YhX2TKKHP.png)

Concerning **lazy initial state**, are you saying passing a default state makes the app slower because React will always rerender it?

[Victoria Lo](https://hashnode.com/@victoria)

[Feb 17, 2021](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/602bab9dcc91ac05270efb59#reply-602c693ab76f9808b488e902)

Hi [Edidiong Asikpo](https://hashnode.com/@didicodes), thanks for your question. Yes, the purpose of lazy initial state is to prevent subsequent re-renders of the same expensive function that you only want to run once.

Let's say you want to run this function upon render but just once:

```
const [state, setState] = useState(getInitialHundredItems())
```

The way React useState works is that even after you updated the state, the initial state function will get executed and then disregarded (replaced with updated value). So if initial state is an expensive function, it will be waste of processing power. Since all initial states will be disregarded and replaced with updated value (if exist) anyways, lazy initial state ensures that the expensive function runs only once.

[Edidiong Asikpo (Didi)](https://hashnode.com/@didicodes)

[Feb 17, 2021](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/602bab9dcc91ac05270efb59#reply-602cd0dcd78c410f41b3e0d0)

Ah ah. This makes sense. Thanks for explaining [Victoria Lo](https://hashnode.com/@victoria)

[Favourite Jome](https://hashnode.com/@Favourite)

[Feb 15, 2021](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/602ae68cf1261277763af4fd)

Interesting read Victoria, I once ran into an error using this

```
setCount(count++)
```

Is there a reason why the example above doesn't work? I'll like to know and also thanks for sharing 🤩.

[Victoria Lo](https://hashnode.com/@victoria)

[Feb 15, 2021](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/602ae68cf1261277763af4fd#reply-602af83840efdc777c71c943)

Thanks for reading [Jome Favourite](https://hashnode.com/@Favourite)!

To answer your question:

setCount(count+1) is taking the current value of 'count', adding 1 to it and then passing this to our `setCount`to update our state. Since `count` is a const, we cannot reassign the 'count' variable, React is simply updating the value of 'count' under the hood using the setter function.

count++ can be written as `count=count+1`. As you can see, you are trying to change/re-assign the value of a const, which is impossible. Hence, the error.

[Favourite Jome](https://hashnode.com/@Favourite)

[Feb 16, 2021](https://hashnode.com/posts/a-look-at-react-hooks-usestate/602a8b0f40efdc777c71c345/comment/602ae68cf1261277763af4fd#reply-602b3b2f40efdc777c71cb08)

Okay [Victoria Lo](https://hashnode.com/@victoria). I understand know, thanks for answering.