Use default reducer state value as initial state when using useReducer hook

packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js

@@ -209,6 +209,23 @@ describe('ReactDOMServerHooks', () => {
       expect(domNode.textContent).toEqual('0');
     });
 
+    itRenders('with default reducer state value', async render => {
+      function reducer(state = 0, action) {
+        return action === 'increment' ? state + 1 : state;
+      }
+      function Counter() {
+        let [count] = useReducer(reducer);
+        yieldValue('Render: ' + count);
+        return <Text text={count} />;
+      }
+
+      const domNode = await render(<Counter />);
+
+      expect(clearYields()).toEqual(['Render: 0', 0]);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('0');
+    });
+
     itRenders('lazy initialization with initialAction', async render => {
       function reducer(state, action) {
         return action === 'increment' ? state + 1 : state;

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -225,7 +225,7 @@ export function useState<S>(
 }
 
 export function useReducer<S, A>(
-  reducer: (S, A) => S,
+  reducer: (S, A | any) => S,
   initialState: S,
   initialAction: A | void | null,
 ): [S, Dispatch<A>] {
@@ -277,7 +277,12 @@ export function useReducer<S, A>(
       initialState = reducer(initialState, initialAction);
     }
     currentlyRenderingComponent = component;
-    workInProgressHook.memoizedState = initialState;
+    if (initialState === undefined) {
+      // use default reducer state value
+      workInProgressHook.memoizedState = reducer(initialState, {});
+    } else {
+      workInProgressHook.memoizedState = initialState;
+    }
     const queue: UpdateQueue<A> = (workInProgressHook.queue = {
       last: null,
       dispatch: null,

packages/react-reconciler/src/ReactFiberHooks.js

@@ -411,7 +411,7 @@ export function useState<S>(
 }
 
 export function useReducer<S, A>(
-  reducer: (S, A) => S,
+  reducer: (S, A | any) => S,
   initialState: S,
   initialAction: A | void | null,
 ): [S, Dispatch<A>] {
@@ -557,7 +557,15 @@ export function useReducer<S, A>(
     initialState = reducer(initialState, initialAction);
   }
   currentlyRenderingFiber = fiber;
-  workInProgressHook.memoizedState = workInProgressHook.baseState = initialState;
+  if (initialState === undefined) {
+    // use default reducer state value
+    workInProgressHook.memoizedState = workInProgressHook.baseState = reducer(
+      initialState,
+      {},
+    );
+  } else {
+    workInProgressHook.memoizedState = workInProgressHook.baseState = initialState;
+  }
   queue = workInProgressHook.queue = {
     last: null,
     dispatch: null,

packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js

@@ -525,6 +525,44 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Count: -2')]);
     });
 
+    it('accepts default reducer state value as initial state', () => {
+      const INCREMENT = 'INCREMENT';
+      const DECREMENT = 'DECREMENT';
+
+      function reducer(state = 0, action) {
+        switch (action) {
+          case 'INCREMENT':
+            return state + 1;
+          case 'DECREMENT':
+            return state - 1;
+          default:
+            return state;
+        }
+      }
+
+      function Counter(props, ref) {
+        const [count, dispatch] = useReducer(reducer);
+        useImperativeHandle(ref, () => ({dispatch}));
+        return <Text text={'Count: ' + count} />;
+      }
+
+      Counter = forwardRef(Counter);
+      const counter = React.createRef(null);
+      ReactNoop.render(<Counter ref={counter} />);
+      ReactNoop.flush();
+      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+
+      counter.current.dispatch(INCREMENT);
+      ReactNoop.flush();
+      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+
+      counter.current.dispatch(DECREMENT);
+      counter.current.dispatch(DECREMENT);
+      counter.current.dispatch(DECREMENT);
+      ReactNoop.flush();
+      expect(ReactNoop.getChildren()).toEqual([span('Count: -2')]);
+    });
+
     it('accepts an initial action', () => {
       const INCREMENT = 'INCREMENT';
       const DECREMENT = 'DECREMENT';