Herkese merhabalar;

• React ile '10fastfingers' gibi typing speed projesi kodluyordum.
• Projede redux kullanıyorum, kullanıcının yazma hızını ölçmek için belirlenen süre 1 dakikadır.
• Bununla birlikte kullanıcı input'a bir şeyler yazmaya başladığı an süre azalmaya başlar.
• Fakat sorunum şu ki; kullanıcı kelimeleri hızlı yazarsa reduceTime fonksiyonu tetiklenmiyor ve süre olduğu yerde takılı kalıyor kullanıcı yavaş yazmaya başlarsa fonksiyon normal çalışıyor.
• Netlify Linki
• Github Linki

Timer.jsx

import { useEffect} from "react";
import { useSelector } from "react-redux";
import {BiTimer} from "react-icons/bi"
import { correctWordsSelector, isStartSelector, timeSelector } from "../redux/wordsSlice";
import { reduceTime, saveResult } from "../utils/actions";


export default function Timer() {
  const time = useSelector((state) => timeSelector(state))
  const isStart = useSelector(state=>isStartSelector(state))
  const correctWords = useSelector((state) => correctWordsSelector(state))
  const startingCondition = isStart && time > 0

  useEffect(() => {
    let interval

    if (startingCondition) {
      interval = setInterval(() => {
        reduceTime()
      }, 1000)

    }else{
        saveResult(correctWords.length)
    }
    return () => {
      clearInterval(interval);
    }

  }, [time, correctWords, startingCondition]);

  return (
      <div className="timer">
      <BiTimer/>
       {time}
      </div>
  );
}

Input.jsx

import React from 'react'
import { useSelector } from 'react-redux'
import { textInputSelector, timeSelector } from '../redux/wordsSlice'
import { handleSpace, handleText } from '../utils/actions'

export default function Input() {
  const textInput = useSelector(state=>textInputSelector(state))
  const time = useSelector(state=>timeSelector(state))

  const handleKeyDown = (e) => {
    if (e.keyCode === 32 && textInput) {
      handleSpace()
    }
  }

  const handleChange = (e) => {
    handleText(e.target.value)
  }

  return (
    <label>
      <input type="text" placeholder="Type for start" value={textInput} onChange={handleChange} onKeyDown={handleKeyDown} disabled={time<1} />
      <span>Show them how fast you write!</span>
    </label>
  )
}

utils/action.js

import { addFinishedGame } from "../redux/recentGamesSlice"
import store from "../redux/store"
import { decreaseTime, replay, setText, space } from "../redux/wordsSlice"

export const handleSpace = () => {
  store.dispatch(space())
}

export const handleText = (text) => {
  store.dispatch(setText(text))
}

export const reduceTime = () => {
  store.dispatch(decreaseTime())
}

export const handleReplay = () => {
  store.dispatch(replay())
}

export const saveResult = (totalCorrectWords) => {
  store.dispatch(addFinishedGame({point:totalCorrectWords}))
}