Level Up Your React Skills: Build a Stopwatch App with Hooks

As a React developer, you may have heard of the useState and useEffect hooks. These hooks are essential tools that allow you to manage state and handle side effects in your React applications. In this blog post, we will be exploring these hooks and demonstrating how to use them to build a stopwatch application.

What is the useState hook?

The useState hook is a built-in hook in React that allows you to manage state in functional components. In React, state is used to store and manage data that can change over time. With the useState hook, you can declare state variables and update them using setter functions.

The useState hook takes an initial state value as its parameter and returns an array with two elements: the current state value and a function to update the state value.

Here's an example of how to use the useState hook to manage a boolean state variable in a React functional component:

import React, { useState } from 'react';

function Example() {
  const [isToggleOn, setIsToggleOn] = useState(false);

  function handleClick() {
    setIsToggleOn(!isToggleOn);
  }

  return (
    <button onClick={handleClick}>
      {isToggleOn ? 'ON' : 'OFF'}
    </button>
  );
}

In this example, we declare a state variable called "isToggleOn" and initialize it to false using the useState hook. We also declare a function called "handleClick" that updates the value of "isToggleOn" when the button is clicked. The button text is then updated based on the value of "isToggleOn".

What is the useEffect hook?

The useEffect hook is another built-in hook in React that allows you to handle side effects in functional components. Side effects can include things like fetching data, setting up event listeners, or updating the document title.

The useEffect hook takes a function as its parameter and runs that function after every render of the component. You can also specify a dependency array as a second parameter to control when the effect should run. The dependency array contains values that the effect depends on, and the effect will only run if one of those values has changed since the last render.

Here's an example of how to use the useEffect hook to update the document title:

import React, { useEffect, useState } from 'react';

function Component() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Click me ({count})
    </button>
  );
}

In this example, we declare a state variable called "count" and initialize it to 0 using the useState hook. We also declare an effect that updates the document title with the current value of "count" whenever it changes. Finally, we declare a function called "handleClick" that updates the value of "count" when the button is clicked.

Building a stopwatch application with useState and useEffect
Now that we've covered the basics of the useState and useEffect hooks, let's build a stopwatch application that uses these hooks.

The stopwatch application will have a start/stop button and a reset button. When the start/stop button is clicked, the stopwatch will begin counting up from 0. When the button is clicked again, the stopwatch will stop counting. When the reset button is clicked, the stopwatch will return to 0.

To implement the stopwatch, we will use the useState hook to manage the elapsed time and the isRunning state variable. We can use the useEffect hook to update the elapsed time on every tick of the stopwatch. With these hooks, we can easily create a functional and interactive stopwatch application.

To sum up, the useState and useEffect hooks are powerful tools that enable us to manage state and handle side effects in our functional components. We have used these hooks to build a stopwatch application that displays the elapsed time when a user clicks start and stop. If you want to see the full code and try out the application for yourself, you can check out the Github repository. Happy coding!