diff --git a/src/components/Options.js b/src/components/Options.js index 88c326d..a6c3a51 100644 --- a/src/components/Options.js +++ b/src/components/Options.js @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useCallback } from 'react' import { useSelector, useDispatch } from 'react-redux' import { debounce } from 'debounce' @@ -15,16 +15,19 @@ export const Options = () => { dispatch(setMaxLength(val)), 200)} + onChange={useCallback( + debounce(val => dispatch(setMaxLength(val)), 100, true), + [dispatch] + )} /> dispatch(setWpm(val)), 200)} + onChange={debounce(val => dispatch(setWpm(val)), 50)} /> ) diff --git a/src/store/reducer.js b/src/store/reducer.js index 344a4bf..0b65f1f 100644 --- a/src/store/reducer.js +++ b/src/store/reducer.js @@ -27,7 +27,12 @@ const reducer = { DEC_WORD: state => ({ ...state, curIdx: selectPrevWord(state) }), INC_SENTENCE: state => ({ ...state, curIdx: selectNextSentence(state) }), DEC_SENTENCE: state => ({ ...state, curIdx: selectPrevSentence(state) }), - SET_MAX_LENGTH: (state, payload) => ({ ...state, maxLength: payload }), + SET_MAX_LENGTH: (state, payload) => ({ + ...state, + maxLength: payload, + running: false, + curIdx: 0 + }), SET_WPM: (state, payload) => ({ ...state, wpm: payload }), START: state => ({ ...state, running: true }), STOP: state => ({ ...state, running: false, curIdx: 0 }),