feat(hooks): add use hook

compat/src/index.d.ts

@@ -130,6 +130,8 @@ declare namespace React {
 		subscribe: (flush: () => void) => () => void,
 		getSnapshot: () => T
 	): T;
+	// React 19 hooks
+	export import use = _hooks.use;
 
 	// Preact Defaults
 	export import Context = _preact.Context;

compat/src/index.js

@@ -19,7 +19,8 @@ import {
 	useMemo,
 	useReducer,
 	useRef,
-	useState
+	useState,
+	use
 } from 'preact/hooks';
 import { Children } from './Children';
 import { PureComponent } from './PureComponent';
@@ -205,6 +206,7 @@ export default {
 	useMemo,
 	useCallback,
 	useContext,
+	use,
 	useDebugValue,
 	version,
 	Children,

compat/test/browser/exports.test.js

@@ -41,6 +41,7 @@ describe('compat exports', () => {
 		expect(Compat.useInsertionEffect).to.be.a('function');
 		expect(Compat.useTransition).to.be.a('function');
 		expect(Compat.useDeferredValue).to.be.a('function');
+		expect(Compat.use).to.be.a('function');
 
 		// Suspense
 		expect(Compat.Suspense).to.be.a('function');
@@ -82,6 +83,7 @@ describe('compat exports', () => {
 		expect(Named.useMemo).to.be.a('function');
 		expect(Named.useCallback).to.be.a('function');
 		expect(Named.useContext).to.be.a('function');
+		expect(Named.use).to.be.a('function');
 
 		// Suspense
 		expect(Named.Suspense).to.be.a('function');

compat/test/ts/index.tsx

@@ -17,6 +17,12 @@ React.createPortal(<div />, document.createDocumentFragment());
 React.createPortal(<div />, document.body.shadowRoot!);
 
 const Ctx = React.createContext({ contextValue: '' });
+const contextValue: { contextValue: string } = React.use(Ctx);
+const promiseValue: string = React.use(Promise.resolve('value'));
+
+contextValue.contextValue.toLowerCase();
+promiseValue.toLowerCase();
+
 class SimpleComponentWithContextAsProvider extends React.Component {
 	componentProp = 'componentProp';
 	render() {

hooks/src/index.d.ts

@@ -123,6 +123,8 @@ export function useMemo<T>(factory: () => T, inputs: Inputs | undefined): T;
  */
 export function useContext<T>(context: PreactContext<T>): T;
 
+export function use<T>(resource: Promise<T> | PreactContext<T>): T;
+
 /**
  * Customize the displayed value in the devtools panel.
  *

hooks/src/index.js

@@ -164,6 +164,65 @@ function getHookState(index, type) {
 	return hooks._list[index];
 }
 
+/**
+ * @template T
+ * @param {Promise<T> | import('preact').PreactContext<T>} resource
+ * @returns {T}
+ */
+export function use(resource) {
+	if (options._hook) {
+		options._hook(currentComponent, currentIndex, 12);
+	}
+
+	if (resource && typeof resource.then == 'function') {
+		return usePromise(/** @type {Promise<T>} */ (resource));
+	}
+
+	const context = /** @type {import('./internal').PreactContext} */ (
+		/** @type {unknown} */ (resource)
+	);
+	const provider = currentComponent.context[context._id];
+	if (!provider) return context._defaultValue;
+
+	const contexts =
+		currentComponent._contexts || (currentComponent._contexts = {});
+	if (!contexts[context._id]) {
+		contexts[context._id] = true;
+		provider.sub(currentComponent);
+	}
+
+	return provider.props.value;
+}
+
+/**
+ * @template T
+ * @param {Promise<T>} promise
+ * @returns {T}
+ */
+function usePromise(promise) {
+	/** @type {Promise<T> & { status?: string, value?: T, reason?: unknown }} */
+	const p = promise;
+
+	if (p.status == 'fulfilled') return /** @type {T} */ (p.value);
+	if (p.status == 'rejected') throw p.reason;
+
+	if (p.status != 'pending') {
+		p.status = 'pending';
+		p.then(
+			value => {
+				p.status = 'fulfilled';
+				p.value = value;
+			},
+			reason => {
+				p.status = 'rejected';
+				p.reason = reason;
+			}
+		);
+	}
+
+	throw p;
+}
+
 /**
  * @template {unknown} S
  * @param {import('./index').Dispatch<import('./index').StateUpdater<S>>} [initialState]

hooks/src/internal.d.ts

@@ -36,6 +36,7 @@ export interface ComponentHooks {
 export interface Component
 	extends Omit<PreactComponent<any, any>, '_renderCallbacks'> {
 	__hooks?: ComponentHooks;
+	_contexts?: Record<string, boolean>;
 	// Extend to include HookStates
 	_renderCallbacks?: Array<HookState | (() => void)>;
 	_hasScuFromHooks?: boolean;