useState For The Fast Paced Developer

Enough with this technical definition, Seriously, what is this useState hook and how does it work ??

  • So this useState function returned us an array with first value being undefined and second value in itself is a function. The first value is Undefined because useState expects some arguments during the function call. So now if we pass anything, let’s say an integer as useState argument,
  • We got the value 5 as the first element of the resulting array. This passed argument is the initial state that we want for our component and this could be anything from number to string to even a function call, anything can be passed inside useState as arguments for setting some initial value.
  • Now, the second element of the resulting array, which is a function call is a very special function that we would be using for changing or ‘Mutating’ the argument passed inside the useState or for changing the state of our component.

Demonstration #1 :

  • We will use a button change the state of our component.
  • After clicking the button.
  1. We passed the initial value of our state, stored in variable string inside of our ‘p’ tag.
  2. We add a button to our UI and and give it a label of ‘Change The State’.
  3. Inside our button component we passed an onClick function with takes a callback and returns our setString function.

Next Steps:




Software Developer experienced in React, Go, K8s, Docker, Node and AWS.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React-Router-Dom library

[Leet Code] Length of Last Word

Creating standalone Desktop Applications with React, Electron and SQLite3

Add and customize Amplify Authentication component in your ReactJs project (Part 5)

10 JS Libraries You Don’t Know About

DockerizingYour First Nodejs Application

npx create-react-loaded supercharged react

How to Enable File Uploads with Phoenix LiveView

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nimish Prabhakar

Nimish Prabhakar

Software Developer experienced in React, Go, K8s, Docker, Node and AWS.

More from Medium

Everything you really need to know about React keys

What I need to be a React developer?

Building Custom Hooks in React

Yarr (yet another react router) | Let’s get started | Great react routing library

Yarr is Yet Another React Library which helps to improve User Experience and application performance by giving data preloading and code preloading strategy with react routes.