A Look at React Hooks: useState

Hi Muhammad Ilham Robani, 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.

Hi Edidiong Asikpo, 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.

Ah ah. This makes sense. Thanks for explaining Victoria Lo

Thanks for reading Jome 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 setCountto 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.

Okay Victoria Lo. I understand know, thanks for answering.