In this chapter, we will look at the syntax for using the State hook. The state hook allows us to use states in React. The syntax for creating a state variable is the following:

const [ variable, updateFunction ] = useState(initialValue);

The useState function creates a new state with an initialValue that can range from an integer to a complex object.

It returns two things – the value of the created state and the reference to a function that can update that value.

We typically use the array deconstructing method to create two constants for storing these values.

In the above code, the constant variable will hold the value of the state, while the updateFunction can be used for updating the value of the variable. For example, we had the following code in the previous chapter:

function Main(props) { 
  const [ clicks, updateClicks ] = useState(1);
  let handleClick = (e) => {
    e.target.innerHTML = `Clicked ${clicks} time(s)!`; 
    updateClicks(clicks + 1);
  }; 
  return ( 
    <button onClick={handleClick}>Click Me!</button> 
  );
}

In the above code, you can see a state variable called clicks is being initiated with a value of 1 - as the value 1 is being passed into the useState function.

In the handleClick function, the updateClicks function is used to increment the value of clicks.