backport #3922

Author: JoviDeCroock

hooks/src/index.js

@@ -182,15 +182,37 @@ export function useReducer(reducer, initialState, init) {
 		hookState._internal = currentInternal;
 		if (!currentInternal.data._hasScuFromHooks) {
 			currentInternal.data._hasScuFromHooks = true;
-			const prevScu = currentInternal._component.shouldComponentUpdate;
+			let prevScu = currentInternal._component.shouldComponentUpdate;
+			const prevCWU = currentInternal._component.componentWillUpdate;
+
+			// If we're dealing with a forced update `shouldComponentUpdate` will
+			// not be called. But we use that to update the hook values, so we
+			// need to call it.
+			currentInternal._component.componentWillUpdate = function (p, s, c) {
+				if (this._force) {
+					let tmp = prevScu;
+					// Clear to avoid other sCU hooks from being called
+					prevScu = undefined;
+					updateHookState(p, s, c);
+					prevScu = tmp;
+				}
+
+				if (prevCWU) prevCWU.call(this, p, s, c);
+			};
 
 			// This SCU has the purpose of bailing out after repeated updates
 			// to stateful hooks.
 			// we store the next value in _nextValue[0] and keep doing that for all
 			// state setters, if we have next states and
 			// all next states within a component end up being equal to their original state
 			// we are safe to bail out for this specific component.
-			currentInternal._component.shouldComponentUpdate = function (p, s, c) {
+			/**
+			 *
+			 * @type {import('./internal').Component["shouldComponentUpdate"]}
+			 */
+			// @ts-ignore - We don't use TS to downtranspile
+			// eslint-disable-next-line no-inner-declarations
+			function updateHookState(p, s, c) {
 				if (!hookState._internal.data.__hooks) return true;
 
 				const stateHooks = hookState._internal.data.__hooks._list.filter(
@@ -221,7 +243,9 @@ export function useReducer(reducer, initialState, init) {
 						? prevScu.call(this, p, s, c)
 						: true
 					: false;
-			};
+			}
+
+			currentInternal._component.shouldComponentUpdate = updateHookState;
 		}
 	}
 

hooks/test/browser/combinations.test.js

@@ -7,9 +7,11 @@ import {
 	useEffect,
 	useLayoutEffect,
 	useRef,
-	useMemo
+	useMemo,
+	useContext
 } from 'preact/hooks';
 import { scheduleEffectAssert } from '../_util/useEffectUtil';
+import { createContext } from 'preact';
 
 /** @jsx createElement */
 
@@ -344,4 +346,57 @@ describe('combinations', () => {
 
 		expect(ops).to.deep.equal(['child effect', 'parent effect']);
 	});
+
+	it('should not block hook updates when context updates are enqueued', () => {
+		const Ctx = createContext({
+			value: 0,
+			setValue: /** @type {*} */ () => {}
+		});
+
+		let triggerSubmit = () => {};
+		function Child() {
+			const ctx = useContext(Ctx);
+			const [shouldSubmit, setShouldSubmit] = useState(false);
+			triggerSubmit = () => setShouldSubmit(true);
+
+			useEffect(() => {
+				if (shouldSubmit) {
+					// Update parent state and child state at the same time
+					ctx.setValue(v => v + 1);
+					setShouldSubmit(false);
+				}
+			}, [shouldSubmit]);
+
+			return <p>{ctx.value}</p>;
+		}
+
+		function App() {
+			const [value, setValue] = useState(0);
+			const ctx = useMemo(() => {
+				return { value, setValue };
+			}, [value]);
+			return (
+				<Ctx.Provider value={ctx}>
+					<Child />
+				</Ctx.Provider>
+			);
+		}
+
+		act(() => {
+			render(<App />, scratch);
+		});
+
+		expect(scratch.textContent).to.equal('0');
+
+		act(() => {
+			triggerSubmit();
+		});
+		expect(scratch.textContent).to.equal('1');
+
+		// This is where the update wasn't applied
+		act(() => {
+			triggerSubmit();
+		});
+		expect(scratch.textContent).to.equal('2');
+	});
 });