Understanding React hooks: The useState() hook

Understanding React hooks: The useState() hook

Hey there!

You might have heard of React Hooks by now. But, what actually is a useState() hook and how does it work? Let's find out!

A React Class Component

PNG image 4.png When React was introduced, all the magic that react could perform was due to this magic box called a component. A component was a small piece JSX code using which you could declaratively define the UI and then plug that UI into any DOM element on the HTML. You could also create Components to use inside of other larger Components and have that reusability factor work for you. But then, when would the browser know when to refresh the content of your page? That is where the state comes into the picture.

The concept of state

PNG image 5.png When React was released, the concept of state was introduced (along with the concept of props). The former was to enable the developer to tell React of the values that the developer cared about. It was requisite that the UI got re-rendered if any of the values that were a part of the state of the Component got changed. The latter was to provide a way for a parent Component to pass a value down to a child.

A functional component

PNG image 6.png A Functional Component was different from the Class Component in that it was just a function that returned JSX code. It was just a medium to get props from the parent component use them to layout a UI however we pleased. There was no concept of state in the context of a Functional Component. All that changed with the introduction of hooks!

The useState hook

PNG image 7.png With the introduction of hooks, a state hook (useState()) was introduced. This changed the game completely. It provided a means to the functional component to be able to define the state, i.e. define the properties it cared about, and that the UI should refresh once any change occurred to any of them.

Syntactically, here is what the useState() hook usage looks like:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

We call the useState() function which returns us a tuple (array of two). The first item in the tuple is the value that is held in the state while the second item is a function that can be used to update the value stored in the state. The state that is generated via the useState() hook in a functional component is exactly the same as the state that is accessed using the this.state property on a Class component (there are some caveats while storing multiple values though).

PNG image 8.png

So the Class component has access to the this property and hence uses the state provided by that while the functional component purely functions (pun intended) on the values returned by the hook:

// Inside the Class component constructor:
this.state = { count: 1 };

// Inside the function component:
const [count, setCount ] = useState(0); 

/******* Access the value **************/
this.state.count; // class component
count; // functional component

/******* Set the value **************/
this.setState({count: 10}); // class component
setCount(10); // functional component

If you liked that, then do connect with me on twitter where I post more of such interesting stuff:

Cheers! See you in the next one :)