Make debouncer more responsive

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 = () => {
       <Slider
         title={'Maximum segment length'}
         min={3}
-        max={14}
+        max={15}
         value={maxLength}
-        onChange={debounce(val => dispatch(setMaxLength(val)), 200)}
+        onChange={useCallback(
+          debounce(val => dispatch(setMaxLength(val)), 100, true),
+          [dispatch]
+        )}
       />
       <Slider
         title={'Words per minute'}
         min={100}
         max={1000}
         value={wpm}
-        onChange={debounce(val => dispatch(setWpm(val)), 200)}
+        onChange={debounce(val => dispatch(setWpm(val)), 50)}
       />
     </div>
   )

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 }),