useCountdown hook

Countdown.jsx

import React from 'react'
import { useCountdown } from 'hooks/useCountdown'

export function Countdown ({ launch }) {
  const { days, hours, minutes, seconds } = useCountdown(launch)

  return (
    <div className='Countdown'>
      <div className='count'>
        <div className='time D'>&nbsp;{days}</div>
        <div className='colon D'>:</div>
        <div className='time H'>{formatLeadingZero(hours)}</div>
        <div className='colon H'>:</div>
        <div className='time M'>{formatLeadingZero(minutes)}</div>
        <div className='colon M'>:</div>
        <div className='time S'>{formatLeadingZero(seconds)}</div>
      </div>
      <div className='units'>
        <div className='D'>{pluralize(days, 'día')}</div>
        <div className='H'>{pluralize(hours, 'hora')}</div>
        <div className='M'>{pluralize(minutes, 'minuto')}</div>
        <div className='S'>{pluralize(seconds, 'segundo')}</div>
      </div>
    </div>
  )
}

function pluralize (count, unit) {
  return parseInt(count, 10) === 1
    ? unit
    : `${unit}s`
}

function formatLeadingZero (number) {
  return number > 9
    ? number.toString()
    : `0${number}`
}

useCountdown.js

import { useCallback, useState, useEffect } from 'react'

export function useCountdown (launch) {
  const [initialLaunch, setInitialLaunch] = useState(launch)
  const [units, setUnits] = useState({
    days: '0',
    hours: '00',
    minutes: '00',
    seconds: '00'
  })

  const updateCountdown = useCallback(() => {
    const remainingTime = initialLaunch - Date.now()
    const { days, hours, minutes, seconds } = getTimeUnits(remainingTime)

    setUnits({ days, hours, minutes, seconds })
  }, [initialLaunch])

  useEffect(() => {
    const intervalID = setInterval(() => updateCountdown(), 1000)

    return () => clearInterval(intervalID)
  }, [initialLaunch, updateCountdown])

  return { ...units, setInitialLaunch }
}

function getTimeUnits (remaining) {
  // Calculate days, hours, minutes and seconds remaining
  const days = Math.floor(remaining / (1000 * 60 * 60 * 24))
  const hours = Math.floor(
    (remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  )
  const minutes = Math.floor(
    (remaining % (1000 * 60 * 60)) / (1000 * 60)
  )
  const seconds = Math.floor((remaining % (1000 * 60)) / 1000)

  return { days, hours, minutes, seconds }
}