Create a Pomodoro Timer with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a Pomodoro timer app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app pomodoro-timer

with NPM to create our React project.

Create the Pomodoro Timer App

To create the Pomodoro timer app, we write:

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

export default function App() {
  const [secondsLeft, setSecondsLeft] = useState(25 * 60);
  const [timer, setTimer] = useState();

  const start = () => {
    const timer = setInterval(() => {
      setSecondsLeft((secondsLeft) => secondsLeft - 1);
      if (secondsLeft === 0) {
        clearInterval(timer);
      }
    }, 1000);
    setTimer(timer);
  };

  useEffect(() => {
    if (secondsLeft === 0) {
      clearInterval(timer);
    }
  }, [secondsLeft, timer]);

  useEffect(() => {
    return () => clearInterval(timer);
  }, [timer]);

  return (
    <div className="App">
      <h1>Pomodoro Timer</h1>
      <button onClick={start}>start</button>
      <div>{secondsLeft} seconds left</div>
    </div>
  );
}

We define the secondsLeft state set to 25 * 60 seconds as the initial value.

Also, we define the timer state set to undefined as the initial value.

The start function creates a timer with the setInterval function.

The callback sets the secondsLeft state by decrementing it by 1.

If secondsLeft is 0, then we call clearInterval to clear the timer.

We run the setIntrval callback every second.

Also, we have the useEffect callback that returns a function to call clearInterval to clear the timer when we unmount the component.

Below that, we have a button to start the timer when we click on it.

And below that, we show the secondsLeft to the user.

Conclusion

We can create a Pomodoro timer easily with React and JavaScript.