fix(hooks): use createInitialState in reducer (#1556)

Author: silviuaavram

src/hooks/useCombobox/index.js

@@ -39,11 +39,10 @@ function useCombobox(userProps = {}) {
     itemToString,
   } = props
   // Initial state depending on controlled props.
-  const initialState = getInitialState(props)
   const [state, dispatch] = useControlledReducer(
     downshiftUseComboboxReducer,
-    initialState,
     props,
+    getInitialState,
   )
   const {isOpen, highlightedIndex, selectedItem, inputValue} = state
 

src/hooks/useCombobox/utils.js

@@ -56,13 +56,17 @@ const propTypes = {
  * compute the rest of the state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-export function useControlledReducer(reducer, initialState, props) {
+export function useControlledReducer(reducer, props, createInitialState) {
   const previousSelectedItemRef = useRef()
-  const [state, dispatch] = useEnhancedReducer(reducer, initialState, props)
+  const [state, dispatch] = useEnhancedReducer(
+    reducer,
+    props,
+    createInitialState,
+  )
 
   // ToDo: if needed, make same approach as selectedItemChanged from Downshift.
   useEffect(() => {

src/hooks/useMultipleSelection/index.js

@@ -38,8 +38,8 @@ function useMultipleSelection(userProps = {}) {
   // Reducer init.
   const [state, dispatch] = useControlledReducer(
     downshiftMultipleSelectionReducer,
-    getInitialState(props),
     props,
+    getInitialState,
   )
   const {activeIndex, selectedItems} = state
 

src/hooks/useSelect/index.js

@@ -42,11 +42,10 @@ function useSelect(userProps = {}) {
     getA11yStatusMessage,
   } = props
   // Initial state depending on controlled props.
-  const initialState = getInitialState(props)
   const [state, dispatch] = useControlledReducer(
     downshiftSelectReducer,
-    initialState,
     props,
+    getInitialState,
   )
   const {isOpen, highlightedIndex, selectedItem, inputValue} = state
 

src/hooks/utils.js

@@ -187,11 +187,11 @@ function useLatestRef(val) {
  * Also calls the onChange handlers for state values that have changed.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useEnhancedReducer(reducer, initialState, props) {
+function useEnhancedReducer(reducer, props, createInitialState) {
   const prevStateRef = useRef()
   const actionRef = useRef()
   const enhancedReducer = useCallback(
@@ -206,7 +206,11 @@ function useEnhancedReducer(reducer, initialState, props) {
     },
     [reducer],
   )
-  const [state, dispatch] = useReducer(enhancedReducer, initialState)
+  const [state, dispatch] = useReducer(
+    enhancedReducer,
+    props,
+    createInitialState,
+  )
   const propsRef = useLatestRef(props)
   const dispatchWithProps = useCallback(
     action => dispatch({props: propsRef.current, ...action}),
@@ -234,12 +238,16 @@ function useEnhancedReducer(reducer, initialState, props) {
  * returning the new state.
  *
  * @param {Function} reducer Reducer function from downshift.
- * @param {Object} initialState Initial state of the hook.
- * @param {Object} props The hook props.
+ * @param {Object} props The hook props, also passed to createInitialState.
+ * @param {Function} createInitialState Function that returns the initial state.
  * @returns {Array} An array with the state and an action dispatcher.
  */
-function useControlledReducer(reducer, initialState, props) {
-  const [state, dispatch] = useEnhancedReducer(reducer, initialState, props)
+function useControlledReducer(reducer, props, createInitialState) {
+  const [state, dispatch] = useEnhancedReducer(
+    reducer,
+    props,
+    createInitialState,
+  )
 
   return [getState(state, props), dispatch]
 }