React Hooks: useState

This is the first in a multi-part series about using hooks in React. This article will cover the useState hook, and also go over what it replaces, and why we should use it.

So, what is state?

A React component re-renders whenever there is a change to Props or State. Whenever a rerender happens, the component is wiped away, and the new version is created with the new information provided to it. While the component is wiped away, State is preserved while everything else is recreated. So basically, State preserves information within a component through multiple rerenders.

Using state the traditional way:

Traditionally, state has only been available in React class based components. The class based components were considered the brains, and the functional components were considered presentational components. That is, they presented the information stored in the class based, parent component. The information to render in a functional component was passed from the parent via Props.

import React, { Component } from 'react'
import ChildComponent from './ChildComponent'


class Main extends Component {


  constructor(props){
    super(props)
    this.state = {
      value:'I am state'
    }
  }

  handleClick = () => {
    this.setState({value:'I have been clicked'})
  }
  
  render() {
    return (
      <div>
        <ChildComponent value={this.state.value} />
        <button onClick​={()=>this.handleClick()}>click me!</button>
      </div>
    )
  }
}

export default Main

The example above demonstrates the traditional relationship between a class based, parent component and a presentational (functional) component. The child component displays the info, the parent holds the info and provides a way to update the info (using this.setState(...)). Notice the amount of code with the constructor and the render method.

Using state with Hooks:

With the release of React 16.8, Hooks have been implemented. Note that hooks are only for use with functional components. Hooks have many uses, but we will focus specifically on the useState hook. The useState hook allows a functional component to maintain its own state. This does two main things:

1. Functional components are not just presentational anymore.
2. Functional components require less code and now perform the same function as the weightier class based components.

Below is a simple component using the useState hook. I will cover the specifics further down.

import React, {useState} from 'react'


function Main(props) {


  const [value,setValue] = useState('I am state')


  const handleClick = () => {
    setValue('I have been clicked')
  }


  return (
    <div>
      {value}
      <button onClick={()=>handleClick()}>click me!</button>
    </div>
  )
}

export default Main

Notice the difference in the amount of code between the class based example and this example?

Importing the useState hook:

import React, {useState} from 'react'

The syntax:

const [value,setValue] = useState('I am the initial value')

This hook uses destructuring. The first index is the name of the state that we are using. In this case, "value". The second index is how we will modify the piece of state. In this case, "setValue". The argument inside the useState function is the initial value.

Using it in your component:

  return (
    <div>
      {value}
      <button onClick={()=>handleClick()}>click me!</button>
    </div>

  )

Using state in a functional component is pretty straightforward once it is set up. You will use it in jsx like you would any normal variable. In this case <div>{value}</div>.

Updating the state:

  const handleClick = () => {
    setValue('I have been clicked')

  }

Again, this is straightforward as well. Use the function you set up when initializing your state, in this case the second index includes "setValue". Use this function in the same way that this.setState() was used in a class based component. setValue("...").

Conclusion

This was a lot to cover in a short article, and it could be covered in much more depth. This should be a good starting point in using React Hooks though. I will be covering a few more hooks in the next articles I write. Next up will be the useEffect hook. Stay tuned.

About Me:

My name is Thomas Alleman. A self taught developer and lifelong learner. I have a passion for teaching others the joy of coding.