{"parents":["cb1ff430e8c473a8a6bddd592106891251bbf5bf"],"body":"* Improve Reducer Hook's lazy init API\r\n\r\n* Use generic type for initilizer input\r\n\r\nStill requires an `any` cast in the case where `init` function is\r\nnot provided.","files":[{"path":"packages\/react-debug-tools\/src\/ReactDebugHooks.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberHooks.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/ReactShallowRenderer.js","status":"M"},{"path":"packages\/react-test-renderer\/src\/__tests__\/ReactShallowRendererHooks-test.js","status":"M"},{"path":"packages\/react\/src\/ReactHooks.js","status":"M"}],"commit":{"authorEmail":"git@andrewclark.io","authoredAt":"2019-01-29T17:39:24-08:00","subject":"Improve Reducer Hook's lazy init API (#14723)","revision":"ba6477aa3cc0b189f4c9b805bf20edb2a2d94e91","authorName":"Andrew Clark","shortRevision":"ba6477aa3c"},"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 426d20a132..63d53b8508 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -115,13 +115,18 @@ function useState(\n return [state, (action: BasicStateAction) => {}];\n }\n \n-function useReducer(\n+function useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch] {\n let hook = nextHook();\n- let state = hook !== null ? hook.memoizedState : initialState;\n+ let state;\n+ if (hook !== null) {\n+ state = hook.memoizedState;\n+ } else {\n+ state = init !== undefined ? init(initialArg) : ((initialArg: any): S);\n+ }\n hookLog.push({\n primitive: 'Reducer',\n stackError: new Error(),\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.internal.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.internal.js\nindex 5fa5c14f49..9885cc0e74 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.internal.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMServerIntegrationHooks-test.internal.js\n@@ -208,12 +208,12 @@ describe('ReactDOMServerHooks', () => {\n expect(domNode.textContent).toEqual('0');\n });\n \n- itRenders('lazy initialization with initialAction', async render => {\n+ itRenders('lazy initialization', async render => {\n function reducer(state, action) {\n return action === 'increment' ? state + 1 : state;\n }\n function Counter() {\n- let [count] = useReducer(reducer, 0, 'increment');\n+ let [count] = useReducer(reducer, 0, c => c + 1);\n yieldValue('Render: ' + count);\n return ;\n }\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\nindex c462487e38..82c61626ef 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRendererHooks.js\n@@ -252,10 +252,10 @@ export function useState(\n );\n }\n \n-export function useReducer(\n+export function useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch] {\n if (__DEV__) {\n if (reducer !== basicStateReducer) {\n@@ -301,13 +301,16 @@ export function useReducer(\n if (__DEV__) {\n isInHookUserCodeInDev = true;\n }\n+ let initialState;\n if (reducer === basicStateReducer) {\n \/\/ Special case for `useState`.\n- if (typeof initialState === 'function') {\n- initialState = initialState();\n- }\n- } else if (initialAction !== undefined && initialAction !== null) {\n- initialState = reducer(initialState, initialAction);\n+ initialState =\n+ typeof initialArg === 'function'\n+ ? ((initialArg: any): () => S)()\n+ : ((initialArg: any): S);\n+ } else {\n+ initialState =\n+ init !== undefined ? init(initialArg) : ((initialArg: any): S);\n }\n if (__DEV__) {\n isInHookUserCodeInDev = false;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\nindex 2955a0e55e..21d5547887 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.js\n@@ -49,10 +49,10 @@ export type Dispatcher = {\n observedBits: void | number | boolean,\n ): T,\n useState(initialState: (() => S) | S): [S, Dispatch>],\n- useReducer(\n+ useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: (I) => S,\n ): [S, Dispatch],\n useContext(\n context: ReactContext,\n@@ -591,16 +591,17 @@ function updateContext(\n return readContext(context, observedBits);\n }\n \n-function mountReducer(\n+function mountReducer(\n reducer: (S, A) => S,\n- initialState: void | S,\n- initialAction: void | null | A,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch ] {\n const hook = mountWorkInProgressHook();\n- \/\/ TODO: Lazy init API will change before release.\n- if (initialAction !== undefined && initialAction !== null) {\n- \/\/ $FlowFixMe - Must express with overloading.\n- initialState = reducer(initialState, initialAction);\n+ let initialState;\n+ if (init !== undefined) {\n+ initialState = init(initialArg);\n+ } else {\n+ initialState = ((initialArg: any): S);\n }\n hook.memoizedState = hook.baseState = initialState;\n const queue = (hook.queue = {\n@@ -618,10 +619,10 @@ function mountReducer(\n return [hook.memoizedState, dispatch];\n }\n \n-function updateReducer(\n+function updateReducer(\n reducer: (S, A) => S,\n- initialState: void | S,\n- initialAction: void | null | A,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch ] {\n const hook = updateWorkInProgressHook();\n const queue = hook.queue;\n@@ -755,7 +756,6 @@ function mountState(\n initialState: (() => S) | S,\n ): [S, Dispatch>] {\n const hook = mountWorkInProgressHook();\n- \/\/ TODO: Lazy init API will change before release.\n if (typeof initialState === 'function') {\n initialState = initialState();\n }\n@@ -1282,16 +1282,16 @@ if (__DEV__) {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n },\n- useReducer(\n+ useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch] {\n currentHookNameInDev = 'useReducer';\n const prevDispatcher = ReactCurrentDispatcher.current;\n ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;\n try {\n- return mountReducer(reducer, initialState, initialAction);\n+ return mountReducer(reducer, initialArg, init);\n } finally {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n@@ -1366,16 +1366,16 @@ if (__DEV__) {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n },\n- useReducer(\n+ useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch ] {\n currentHookNameInDev = 'useReducer';\n const prevDispatcher = ReactCurrentDispatcher.current;\n ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;\n try {\n- return updateReducer(reducer, initialState, initialAction);\n+ return updateReducer(reducer, initialArg, init);\n } finally {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n@@ -1457,17 +1457,17 @@ if (__DEV__) {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n },\n- useReducer(\n+ useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch ] {\n currentHookNameInDev = 'useReducer';\n warnInvalidHookAccess();\n const prevDispatcher = ReactCurrentDispatcher.current;\n ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;\n try {\n- return mountReducer(reducer, initialState, initialAction);\n+ return mountReducer(reducer, initialArg, init);\n } finally {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n@@ -1552,17 +1552,17 @@ if (__DEV__) {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\n },\n- useReducer(\n+ useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch ] {\n currentHookNameInDev = 'useReducer';\n warnInvalidHookAccess();\n const prevDispatcher = ReactCurrentDispatcher.current;\n ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnUpdateInDEV;\n try {\n- return updateReducer(reducer, initialState, initialAction);\n+ return updateReducer(reducer, initialArg, init);\n } finally {\n ReactCurrentDispatcher.current = prevDispatcher;\n }\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\nindex 0a37db0d37..ff39ddee80 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooks-test.internal.js\n@@ -752,19 +752,19 @@ describe('ReactHooks', () => {\n \n const ThemeContext = createContext('light');\n function App() {\n- useReducer(\n- () => {\n- ReactCurrentDispatcher.current.readContext(ThemeContext);\n- },\n- null,\n- {},\n- );\n+ const [state, dispatch] = useReducer((s, action) => {\n+ ReactCurrentDispatcher.current.readContext(ThemeContext);\n+ return action;\n+ }, 0);\n+ if (state === 0) {\n+ dispatch(1);\n+ }\n return null;\n }\n \n- expect(() => ReactTestRenderer.create()).toWarnDev(\n+ expect(() => ReactTestRenderer.create()).toWarnDev([\n 'Context can only be read while React is rendering',\n- );\n+ ]);\n });\n \n \/\/ Edge case.\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\nindex 363ef3bd42..2f74fdc9c8 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n@@ -524,14 +524,12 @@ describe('ReactHooksWithNoopRenderer', () => {\n expect(ReactNoop.getChildren()).toEqual([span('Count: -2')]);\n });\n \n- it('accepts an initial action', () => {\n+ it('lazy init', () => {\n const INCREMENT = 'INCREMENT';\n const DECREMENT = 'DECREMENT';\n \n function reducer(state, action) {\n switch (action) {\n- case 'INITIALIZE':\n- return 10;\n case 'INCREMENT':\n return state + 1;\n case 'DECREMENT':\n@@ -541,27 +539,28 @@ describe('ReactHooksWithNoopRenderer', () => {\n }\n }\n \n- const initialAction = 'INITIALIZE';\n-\n function Counter(props, ref) {\n- const [count, dispatch] = useReducer(reducer, 0, initialAction);\n+ const [count, dispatch] = useReducer(reducer, props, p => {\n+ ReactNoop.yield('Init');\n+ return p.initialCount;\n+ });\n useImperativeHandle(ref, () => ({dispatch}));\n return ;\n }\n Counter = forwardRef(Counter);\n const counter = React.createRef(null);\n- ReactNoop.render();\n- ReactNoop.flush();\n+ ReactNoop.render();\n+ expect(ReactNoop.flush()).toEqual(['Init', 'Count: 10']);\n expect(ReactNoop.getChildren()).toEqual([span('Count: 10')]);\n \n counter.current.dispatch(INCREMENT);\n- ReactNoop.flush();\n+ expect(ReactNoop.flush()).toEqual(['Count: 11']);\n expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);\n \n counter.current.dispatch(DECREMENT);\n counter.current.dispatch(DECREMENT);\n counter.current.dispatch(DECREMENT);\n- ReactNoop.flush();\n+ expect(ReactNoop.flush()).toEqual(['Count: 8']);\n expect(ReactNoop.getChildren()).toEqual([span('Count: 8')]);\n });\n \ndiff --git a\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js b\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\nindex ee8b68b0f8..0701854452 100644\n--- a\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactShallowRenderer.js\n@@ -223,10 +223,10 @@ class ReactShallowRenderer {\n }\n \n _createDispatcher(): DispatcherType {\n- const useReducer = (\n+ const useReducer = (\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ): [S, Dispatch ] => {\n this._validateCurrentlyRenderingComponent();\n this._createWorkInProgressHook();\n@@ -259,13 +259,16 @@ class ReactShallowRenderer {\n }\n return [workInProgressHook.memoizedState, dispatch];\n } else {\n+ let initialState;\n if (reducer === basicStateReducer) {\n \/\/ Special case for `useState`.\n- if (typeof initialState === 'function') {\n- initialState = initialState();\n- }\n- } else if (initialAction !== undefined && initialAction !== null) {\n- initialState = reducer(initialState, initialAction);\n+ initialState =\n+ typeof initialArg === 'function'\n+ ? ((initialArg: any): () => S)()\n+ : ((initialArg: any): S);\n+ } else {\n+ initialState =\n+ init !== undefined ? init(initialArg) : ((initialArg: any): S);\n }\n workInProgressHook.memoizedState = initialState;\n const queue: UpdateQueue = (workInProgressHook.queue = {\ndiff --git a\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRendererHooks-test.js b\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRendererHooks-test.js\nindex 60c79a12d7..da352a971e 100644\n--- a\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRendererHooks-test.js\n+++ b\/packages\/react-test-renderer\/src\/__tests__\/ReactShallowRendererHooks-test.js\n@@ -91,23 +91,19 @@ describe('ReactShallowRenderer with hooks', () => {\n });\n \n it('should work with useReducer', () => {\n- const initialState = {count: 0};\n-\n function reducer(state, action) {\n switch (action.type) {\n- case 'reset':\n- return initialState;\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n- default:\n- return state;\n }\n }\n \n- function SomeComponent({initialCount}) {\n- const [state] = React.useReducer(reducer, {count: initialCount});\n+ function SomeComponent(props) {\n+ const [state] = React.useReducer(reducer, props, p => ({\n+ count: p.initialCount,\n+ }));\n \n return (\n
\n@@ -141,25 +137,19 @@ describe('ReactShallowRenderer with hooks', () => {\n });\n \n it('should work with a dispatched state change for a useReducer', () => {\n- const initialState = {count: 0};\n-\n function reducer(state, action) {\n switch (action.type) {\n- case 'reset':\n- return initialState;\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n- default:\n- return state;\n }\n }\n \n- function SomeComponent({initialCount}) {\n- const [state, dispatch] = React.useReducer(reducer, {\n- count: initialCount,\n- });\n+ function SomeComponent(props) {\n+ const [state, dispatch] = React.useReducer(reducer, props, p => ({\n+ count: p.initialCount,\n+ }));\n \n if (state.count === 0) {\n dispatch({type: 'increment'});\ndiff --git a\/packages\/react\/src\/ReactHooks.js b\/packages\/react\/src\/ReactHooks.js\nindex 37f85cd5c3..07098fc740 100644\n--- a\/packages\/react\/src\/ReactHooks.js\n+++ b\/packages\/react\/src\/ReactHooks.js\n@@ -56,13 +56,13 @@ export function useState(initialState: (() => S) | S) {\n return dispatcher.useState(initialState);\n }\n \n-export function useReducer(\n+export function useReducer(\n reducer: (S, A) => S,\n- initialState: S,\n- initialAction: A | void | null,\n+ initialArg: I,\n+ init?: I => S,\n ) {\n const dispatcher = resolveDispatcher();\n- return dispatcher.useReducer(reducer, initialState, initialAction);\n+ return dispatcher.useReducer(reducer, initialArg, init);\n }\n \n export function useRef(initialValue: T): {current: T} {\n"}

dillon1000/react

Files changed