useCountdown

Countdown.js

import { useState, useEffect } from 'react'

export const useCountdown = ({ initialValue, delay }) => {
  const [value, setValue] = useState(initialValue)
  useEffect(() => {
    if (value > 0) setTimeout(() => setValue(value - 1), delay)
  })
  return value
}

Home.js

import React from 'react'
import { useCountdown } from './Countdown'

const Home = ({ progress, error, result }) => {
  const value = useCountdown({ initialValue: 10, delay: DURATION })
  if (value > 0) return <Count key={value}>{value}</Count>
  if (progress) return 'Loading...'
  if (error) return 'Oups'
  return (
    <MovieList>
      {result.data.results.map(movie => (
        <Link key={movie.id} to={`/movies/${movie.id}`}>
          <MovieCard movie={movie} />
        </Link>
      ))}
    </MovieList>
  )
}