【React×useRef】ストップウォッチを自作！useEffectで簡単タイマー実装ガイド

table of contents

Why build a stopwatch with React?

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

Time measurement is used in the following situations:

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.

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."

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

useEffect is suitable for the following:

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

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

Here is the basic configuration:

 
  ); }

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

 
  );
  
     ) ;
    
    }, 1000);
  };
  
    ;
  };
  
  };
  
  }, []);
   (
    
  );
}

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

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

 ;
 
  );
  
     ) ;
    
    }, 1000);
  };
  
    ;
  };
  
  };
  
  }, []);
   (
    
  );
}
 
  '0');
  '0');
  '0');
   
}

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

As a recap:

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