Opt-in for using View Transitions in React. View Transitions only trigger for async updates like startTransition, useDeferredValue, Actions or <Suspense> revealing from fallback to content. Synchronous updates provide an opt-out but also guarantee that they commit immediately which View Transitions can't.

Functions

Action

inline fun Action(value: String): ActionOrString<*>

fun <T> Action(value: suspend (T) -> Unit): Action<T>

addTransitionType

external fun addTransitionType(type: ViewTransitionType)

addTransitionType reference documentation

asActionOrNull

inline fun <T> ActionOrString<T>.asActionOrNull(): Action<T>?

asElementOrNull

fun ReactNode.asElementOrNull(): ReactElement<*>?

asStringOrNull

inline fun ActionOrString<*>.asStringOrNull(): String?

fun ReactNode.asStringOrNull(): String?

cacheSignal

external fun cacheSignal(): CacheSignal?

captureOwnerStack

external fun captureOwnerStack(): String?

Warning: Only available in development builds.

createContext

external fun <T : Any> createContext(): Context<T?>

external fun <T> createContext(defaultValue: T): Context<T>

Online Documentation

createElement

external fun createElement(type: ElementType, props: P? = definedExternally, vararg children: ReactNode?): ReactElement

Online Documentation

createRequiredContext

external fun <T : Any> createRequiredContext(): RequiredContext<T>

Online Documentation

getChildArray

fun ChildrenBuilder.getChildArray(): ReadonlyArray<ReactNode?>?

fun Props.getChildArray(): ReadonlyArray<ReactNode?>?

IntrinsicType

inline fun IntrinsicType(tagName: String): IntrinsicType

invoke

suspend operator fun <T> Action<T>.invoke(data: T)

isValidElement

external fun isValidElement(element: Any?): Boolean

Online Documentation

lazy

external fun lazy(factory: () -> Promise<ComponentModule>): ExoticComponent

Online Documentation

memo

external fun memo(type: ComponentType, propsAreEqual: (P, P) -> Boolean = definedExternally): FC

ReactNode

inline fun ReactNode(source: ReadonlyArray<ReactNode>): ReactNode

inline fun ReactNode(source: Char): ReactNode

inline fun ReactNode(source: String): ReactNode

inline fun ReactNode(source: String?): ReactNode?

RefCallback

fun <T : Any> RefCallback(block: suspend CoroutineScope.(T) -> Unit): RefCallback<T>

StateInstance

inline fun <T> StateInstance(value: T, setter: StateSetter<T>): StateInstance<T>

use

external fun <T> use(context: PromiseLike<T>): T

external fun <T> use(context: Context<T>): T

external fun <T : Any> use(context: RequiredContext<T>): T?

Online Documentation

useActionState

fun <S> useActionState(initialState: S, permalink: String? = undefined, action: suspend CoroutineScope.(state: S) -> S): ActionStateInstance1<S>

fun <S, P> useActionState(initialState: S, permalink: String? = undefined, action: suspend CoroutineScope.(state: S, payload: P) -> S): ActionStateInstance2<S, P>

Online Documentation

useCallback

inline fun <T : Function<*>> useCallback(vararg dependencies: Any?, callback: T): T

Online Documentation

useDebugValue

external fun <T : Any> useDebugValue(value: T, format: (value: T) -> Any = definedExternally)

Online Documentation

useDeferredValue

external fun <T> useDeferredValue(value: T, initialValue: T = definedExternally): T

Online Documentation

useEffect

fun useEffect(effect: suspend CoroutineScope.() -> Unit)

fun useEffect(vararg dependencies: Any?, effect: suspend CoroutineScope.() -> Unit)

Online Documentation

useEffectEvent

external fun <T : Function<Unit>> useEffectEvent(handler: T): T

Online Documentation

useEffectOnce

fun useEffectOnce(effect: suspend CoroutineScope.() -> Unit)

Online Documentation

useEffectOnceWithCleanup

fun useEffectOnceWithCleanup(effect: CleanupBuilder.() -> Unit)

Online Documentation

useEffectWithCleanup

fun useEffectWithCleanup(effect: CleanupBuilder.() -> Unit)

fun useEffectWithCleanup(vararg dependencies: Any?, effect: CleanupBuilder.() -> Unit)

Online Documentation

useEqualSetter

fun <T> useEqualSetter(setter: StateSetter<T>): StateSetter<T>

useEqualState

fun <T : Any> useEqualState(): StateInstance<T?>

fun <T> useEqualState(initialValue: T): StateInstance<T>

fun <T> useEqualState(initializer: () -> T): StateInstance<T>

useFunctionState

external fun <T : Any> useFunctionState(): FunctionStateInstance<T?>

external fun <T> useFunctionState(initialValue: T): FunctionStateInstance<T>

external fun <T> useFunctionState(initializer: () -> T): FunctionStateInstance<T>

useId

external fun useId(): ElementId

Online Documentation

useImperativeHandle

inline fun <T : Any> useImperativeHandle(ref: Ref<T>?, vararg dependencies: Any?, noinline init: () -> T?)

Online Documentation

useInsertionEffect

fun useInsertionEffect(effect: suspend CoroutineScope.() -> Unit)

fun useInsertionEffect(vararg dependencies: Any?, effect: suspend CoroutineScope.() -> Unit)

Online Documentation

useInsertionEffectWithCleanup

fun useInsertionEffectWithCleanup(effect: CleanupBuilder.() -> Unit)

fun useInsertionEffectWithCleanup(vararg dependencies: Any?, effect: CleanupBuilder.() -> Unit)

Online Documentation

useLayoutEffect

fun useLayoutEffect(effect: suspend CoroutineScope.() -> Unit)

fun useLayoutEffect(vararg dependencies: Any?, effect: suspend CoroutineScope.() -> Unit)

Online Documentation

useLayoutEffectOnce

fun useLayoutEffectOnce(effect: suspend CoroutineScope.() -> Unit)

Online Documentation

useLayoutEffectOnceWithCleanup

fun useLayoutEffectOnceWithCleanup(effect: CleanupBuilder.() -> Unit)

Online Documentation

useLayoutEffectWithCleanup

fun useLayoutEffectWithCleanup(effect: CleanupBuilder.() -> Unit)

fun useLayoutEffectWithCleanup(vararg dependencies: Any?, effect: CleanupBuilder.() -> Unit)

Online Documentation

useMemo

inline fun <T> useMemo(vararg dependencies: Any?, noinline callback: () -> T): T

Online Documentation

useOptimistic

external fun <T> useOptimistic(passthrough: T): StateInstance<T>

external fun <T, A> useOptimistic(passthrough: T, reducer: (state: T, action: A) -> T): Tuple2<T, (action: A) -> Unit>

Online Documentation

useReducer

external fun <S : Any, A> useReducer(reducer: Reducer<S?, A>): ReducerInstance<S?, A>

external fun <S, A> useReducer(reducer: Reducer<S, A>, initialState: S): ReducerInstance<S, A>

external fun <S, A, I> useReducer(reducer: Reducer<S, A>, initializerArg: I, initializer: (I) -> S): ReducerInstance<S, A>

Online Documentation

useRef

external fun <T : Any> useRef(initialValue: T? = definedExternally): RefObject<T>

Online Documentation

useRefCallback

fun <T : Any> useRefCallback(vararg dependencies: Any?, block: suspend CoroutineScope.(T) -> Unit): RefCallback<T>

useRefState

external fun <T : Any> useRefState(): Tuple2<T?, RefCallback<T>>

Example

useRefValue

inline fun <T : Any> useRefValue(): RefValueInstance<T?>

inline fun <T : Any> useRefValue(initialValue: T): RefValueInstance<T>

Online Documentation

useRequired

fun <T : Any> useRequired(context: Context<T?>): T

fun <T : Any> useRequired(context: RequiredContext<T>): T

useState

external fun <T : Any> useState(): StateInstance<T?>

external fun <T> useState(initialValue: T): StateInstance<T>

external fun <T> useState(initializer: () -> T): StateInstance<T>

Online Documentation

useSyncExternalStore

external fun <Snapshot> useSyncExternalStore(subscribe: (onStoreChange: () -> Unit) -> Cleanup, getSnapshot: () -> Snapshot, getServerSnapshot: () -> Snapshot = definedExternally): Snapshot

Online Documentation

useTransition

fun useTransition(): TransitionInstance

Online Documentation

ViewTransitionName

inline fun ViewTransitionName(value: String): ViewTransitionName

ViewTransitionType

inline fun ViewTransitionType(value: String): ViewTransitionType