Merge pull request #3568 from preactjs/redo-hooks

React 18 hooks

compat/src/index.d.ts

@@ -29,6 +29,14 @@ declare namespace React {
 	export import useReducer = _hooks.useReducer;
 	export import useRef = _hooks.useRef;
 	export import useState = _hooks.useState;
+	// React 18 hooks
+	export import useInsertionEffect = _hooks.useLayoutEffect;
+	export function useTransition(): [false, typeof startTransition];
+	export function useDeferredValue<T = any>(val: T): T;
+	export function useSyncExternalStore<T>(
+		subscribe: (flush: () => void) => () => void,
+		getSnapshot: () => T
+	): T;
 
 	// Preact Defaults
 	export import ContextType = preact.ContextType;
@@ -51,6 +59,7 @@ declare namespace React {
 	// Compat
 	export import StrictMode = preact.Fragment;
 	export const version: string;
+	export function startTransition(cb: () => void): void;
 
 	// HTML
 	export import HTMLAttributes = JSXInternal.HTMLAttributes;

compat/src/index.js

@@ -117,6 +117,37 @@ const flushSync = (callback, arg) => callback(arg);
  */
 const StrictMode = Fragment;
 
+export function startTransition(cb) {
+	cb();
+}
+
+export function useDeferredValue(val) {
+	return val;
+}
+
+export function useTransition() {
+	return [false, startTransition];
+}
+
+// TODO: in theory this should be done after a VNode is diffed as we want to insert
+// styles/... before it attaches
+export const useInsertionEffect = useLayoutEffect;
+
+export function useSyncExternalStore(subscribe, getSnapshot) {
+	const [state, setState] = useState(getSnapshot);
+
+	// TODO: in suspense for data we could have a discrepancy here because Preact won't re-init the "useState"
+	// when this unsuspends which could lead to stale state as the subscription is torn down.
+
+	useEffect(() => {
+		return subscribe(() => {
+			setState(getSnapshot());
+		});
+	}, [subscribe, getSnapshot]);
+
+	return state;
+}
+
 export * from 'preact/hooks';
 export {
 	version,
@@ -153,6 +184,11 @@ export default {
 	useReducer,
 	useEffect,
 	useLayoutEffect,
+	useInsertionEffect,
+	useTransition,
+	useDeferredValue,
+	useSyncExternalStore,
+	startTransition,
 	useRef,
 	useImperativeHandle,
 	useMemo,

compat/test/browser/exports.test.js

@@ -22,6 +22,10 @@ describe('compat exports', () => {
 		expect(Compat.useMemo).to.be.a('function');
 		expect(Compat.useCallback).to.be.a('function');
 		expect(Compat.useContext).to.be.a('function');
+		expect(Compat.useSyncExternalStore).to.be.a('function');
+		expect(Compat.useInsertionEffect).to.be.a('function');
+		expect(Compat.useTransition).to.be.a('function');
+		expect(Compat.useDeferredValue).to.be.a('function');
 
 		// Suspense
 		expect(Compat.Suspense).to.be.a('function');
@@ -41,6 +45,7 @@ describe('compat exports', () => {
 		expect(Compat.unmountComponentAtNode).to.exist.and.be.a('function');
 		expect(Compat.unstable_batchedUpdates).to.exist.and.be.a('function');
 		expect(Compat.version).to.exist.and.be.a('string');
+		expect(Compat.startTransition).to.be.a('function');
 	});
 
 	it('should have named exports', () => {

compat/test/browser/hooks.test.js

@@ -0,0 +1,131 @@
+import React, {
+	createElement,
+	useDeferredValue,
+	useInsertionEffect,
+	useSyncExternalStore,
+	useTransition,
+	render
+} from 'preact/compat';
+import { setupRerender, act } from 'preact/test-utils';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
+
+describe('React-18-hooks', () => {
+	/** @type {HTMLDivElement} */
+	let scratch;
+
+	/** @type {() => void} */
+	let rerender;
+
+	beforeEach(() => {
+		scratch = setupScratch();
+		rerender = setupRerender();
+	});
+
+	afterEach(() => {
+		teardown(scratch);
+	});
+
+	describe('useDeferredValue', () => {
+		it('returns the value', () => {
+			const App = props => {
+				const val = useDeferredValue(props.text);
+				return <p>{val}</p>;
+			};
+
+			render(<App text="hello world" />, scratch);
+
+			expect(scratch.innerHTML).to.equal('<p>hello world</p>');
+		});
+	});
+
+	describe('useInsertionEffect', () => {
+		it('runs the effect', () => {
+			const spy = sinon.spy();
+			const App = () => {
+				useInsertionEffect(spy, []);
+				return <p>hello world</p>;
+			};
+
+			act(() => {
+				render(<App />, scratch);
+			});
+
+			expect(scratch.innerHTML).to.equal('<p>hello world</p>');
+			expect(spy).to.be.calledOnce;
+		});
+	});
+
+	describe('useTransition', () => {
+		it('runs transitions', () => {
+			const spy = sinon.spy();
+
+			let go;
+			const App = () => {
+				const [isPending, start] = useTransition();
+				go = start;
+				return <p>Pending: {isPending ? 'yes' : 'no'}</p>;
+			};
+
+			render(<App />, scratch);
+			expect(scratch.innerHTML).to.equal('<p>Pending: no</p>');
+
+			go(spy);
+			rerender();
+			expect(spy).to.be.calledOnce;
+			expect(scratch.innerHTML).to.equal('<p>Pending: no</p>');
+		});
+	});
+
+	describe('useSyncExternalStore', () => {
+		it('subscribes and follows effects', () => {
+			const subscribe = sinon.spy(() => () => {});
+			const getSnapshot = sinon.spy(() => 'hello world');
+
+			const App = () => {
+				const value = useSyncExternalStore(subscribe, getSnapshot);
+				return <p>{value}</p>;
+			};
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(scratch.innerHTML).to.equal('<p>hello world</p>');
+			expect(subscribe).to.be.calledOnce;
+			expect(getSnapshot).to.be.calledOnce;
+		});
+
+		it('subscribes and rerenders when called', () => {
+			let flush;
+			const subscribe = sinon.spy(cb => {
+				flush = cb;
+				return () => {};
+			});
+			let called = false;
+			const getSnapshot = sinon.spy(() => {
+				if (called) {
+					return 'hello new world';
+				}
+
+				return 'hello world';
+			});
+
+			const App = () => {
+				const value = useSyncExternalStore(subscribe, getSnapshot);
+				return <p>{value}</p>;
+			};
+
+			act(() => {
+				render(<App />, scratch);
+			});
+			expect(scratch.innerHTML).to.equal('<p>hello world</p>');
+			expect(subscribe).to.be.calledOnce;
+			expect(getSnapshot).to.be.calledOnce;
+
+			called = true;
+			flush();
+			rerender();
+
+			expect(scratch.innerHTML).to.equal('<p>hello new world</p>');
+		});
+	});
+});