Learn TypeScript 3 by Building Web Applications

Defining state with the useState hook

The first React hook that we'll discover together is probably also the one that you'll use most: useState. As its name suggests, it enables function components to have/use internal state. React will maintain that internal state in-between the re-renders of the concerned components.

You can invoke the useState hook within a function component to define a single state variable, along with a function to update it.

You can also call useState multiple times in a single component to define multiple state variables.

Take a look at a simple example:

import React, {useState} from 'react'; 
 
export function Switch(props) { 
    const [currentSwitchStatus, switchStatus] = useState(false); return ( <div> <span>The switch ...