Hook for simulating some typing

User.js

import { useEffect } from "react"

const TIMER_WINDOW = 20000
const TYPING_DELAY = 20
const MAX_LENGTH = 20

export const useTyping = (setState) =>
  useEffect(() => {
    const inputs = document.getElementsByClassName("input-letter")
    Array.from(inputs).forEach((el, idx) => {
      const delay = (1 + idx) * TYPING_DELAY
      const isTyping = setInterval(() => {
        const l = el.id
        setState(_state => ({
          ..._state,
          [l]:
            _state[l].length < MAX_LENGTH
              ? _state[l] + _state[l].slice(0, 1)
              : _state[l].slice(0, 1)
        }))
      }, delay)
      setTimeout(() => {
        clearInterval(isTyping)
      }, TIMER_WINDOW)
    })
  }, [])