Skip to main content

useCurrentTime

Overview​

The useCurrentTime hook is a custom React hook that provides a way to execute a callback function at a specified frequency with the current time as input. The hook leverages the @js-joda/core library for working with time in a precise and immutable manner.

Importing​

To use the useCurrentTime hook, you need to import it:

import { useCurrentTime } from './jmaelements/hooks/useCurrentTime'

Hook Signature​

useCurrentTime(
  onTick: (_: jsjoda.Instant) => void,
  frequency?: number
): void

Parameters​

  • onTick: A callback function that receives the current time as a jsjoda.Instant. This function is invoked at the specified interval.
  • frequency: An optional number representing the interval (in milliseconds) at which the onTick callback is executed. Defaults to 100ms if not provided.

Returns​

This hook does not return any values; it only invokes the provided onTick callback at the specified interval.

How It Works​

  1. Uses React.useEffect to set up a setInterval that invokes the onTick callback with the current time (jsjoda.Instant.now()).
  2. The interval runs at the specified frequency.
  3. Cleans up the interval using clearInterval when the component unmounts or dependencies change.

Example Usage​

Basic Example​

import React from 'react';
import { useCurrentTime } from './jmaelements/hooks/useCurrentTime';
import * as jsjoda from '@js-joda/core';

const TimeDisplay: React.FC = () => {
  const [currentTime, setCurrentTime] = React.useState<string>('');

  // Using the custom hook to update the current time
  useCurrentTime((instant) => {
    setCurrentTime(instant.toString());
  }, 1000); // Updates every second

  return (
    <div>
      <h1>Current Time</h1>
      <p>{currentTime}</p>
    </div>
  );
};

export default TimeDisplay;

Explanation​

  1. Callback Execution: The onTick function is called every second with the current time.
  2. State Update: The setCurrentTime function updates the displayed time in the component.

Example with Custom Frequency​

import React from 'react';
import { useCurrentTime } from './jmaelements/hooks/useCurrentTime';
import * as jsjoda from '@js-joda/core';

const FastClock: React.FC = () => {
  const [currentTime, setCurrentTime] = React.useState<string>('');

  // Using the custom hook with a faster frequency
  useCurrentTime((instant) => {
    setCurrentTime(instant.toString());
  }, 100); // Updates every 100ms

  return (
    <div>
      <h1>Fast Clock</h1>
      <p>{currentTime}</p>
    </div>
  );
};

export default FastClock;

Explanation​

  1. Custom Frequency: The clock updates 10 times per second due to the frequency set to 100ms.

Best Practices​

  • Optimize Callback Logic: Avoid expensive computations in the onTick callback to prevent performance bottlenecks.
  • Cleanup: Ensure proper cleanup of intervals when the component unmounts.
  • Frequency: Use an appropriate frequency value based on the precision needed for your use case.

Notes​

  • This hook uses the @js-joda/core library for time handling, ensuring high precision and immutability.
  • The hook is designed to be lightweight and simple, with flexibility for different update intervals.

Contributing​

If you encounter issues or have suggestions for improving the useCurrentTime hook, feel free to contribute or report an issue on the repository.