[React×useRef] Make your own stopwatch! Easy timer implementation guide with useEffect

programming

Why build a stopwatch with React?

What is the importance of time apps?

Bottom line: The stopwatch is a great way to learn some basic React skills.

Time measurement is used in the following situations:

  • Exercise record (running timer, etc.)
  • Study time management (Pomodoro method, etc.)
  • Measuring work hours at factories and workplaces
  • Limiting children's gaming and playtime

Such "time measuring functions" areIt is widely used not only in web applications but also in the real world.

By creating a stopwatch with React,Screen state management, time control, and side effectsMany other skills will be acquired.


How to use useRef and useEffect

Why do we need useRef?

Bottom line: Use it to persist values while avoiding screen redraws.

With normal state management (useState), the screen is updated every time the value changes.

But with a stopwatch,Updating the state every second would be expensive.

Therefore, we use useRef to record the time and timer ID as "values that are not redrawn but are retained."

Where to use useEffect?

Bottom line: Use it to adjust the timing of initialization, cleanup, etc.

useEffect is suitable for the following:

  • Execute the process once when the app starts
  • Stop the timer when the component is destroyed
  • Switching events according to button presses

Like a stopwatchFunctions closely related to timeNow, how you use useEffect is very important.


Create a stopwatch display using React

Consider the screen and button configuration

Conclusion: Simply have "time" and "three buttons".

Here is the basic configuration:

  • Display of elapsed time (00:00:00)
  • Start button
  • Stop button
  • Reset button
1
2
3
4
5
6
7
8
9
    
      
      
      
      
      
    
  ); }

Implementing start/stop/reset functions

Expressing actual movement with React

Conclusion: You can easily achieve this by advancing the time with setInterval and managing it with useRef.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  
  );
  
     ) ;
    
      
    }, 1000);
  };
  
    
    ;
  };
  
    
    
  };
  
    
  }, []);
   (
    
      
      
      
      
      
    
  );
}

Application functions and improvements

How to make a better stopwatch?

Conclusion: It would be more useful with the following additional features:

  • Pause and resume functionality
  • Lap time (interval time) recording
  • Improve the appearance with CSS
  • Maximum time and alarm settings

To learn how to handle time and side effectsJust the right subjectA stopwatch is highly recommended.


Completed code list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
;
  
  );
  
     ) ;
    
      
    }, 1000);
  };
  
    
    ;
  };
  
    
    
  };
  
    
  }, []);
   (
    
      
      
      
      
      
    
  );
}
  '0');
  '0');
  '0');
  
}

summary

ReactuseRefanduseEffectUsingHow to Build a Stopwatch App from ScratchI have learned the following.

As a recap:

  • useRefA tool that retains values without redrawing
  • useEffectA means of managing the start and end timing of processing
  • With React,Anyone can make a professional stopwatch

Please try out the code yourself.Get familiar with how React handles time and state.


Related links:


Copied title and URL