@lynx-js/react

Welcome to the API reference for @lynx-js/react, the package that provides the ReactLynx framework. For an introduction to ReactLynx, please visit the ReactLynx Guides.

React APIs

ReactLynx is based on the React 17 API. You can expect the React APIs provided by @lynx-js/react to be fully compatible with React 17 or Preact.

Here is an overview of the APIs provided by ReactLynx. These APIs will behave consistently with those described in the official React reference unless otherwise specified. We will also highlight any special considerations for using them on the Lynx platform.

Why is it based on compatibility with React 17?

React officially entered the "concurrent" era starting with React 18. Concurrent React features, represented by APIs such as useTransition and useDeferredValue, have very strict requirements for the scheduling method and concurrency model of the execution environment—including dependencies on or overwriting of browser Web APIs, dependencies on the new architecture of React Native, and more. Lynx has its own characteristics and considerations in architectural evolution, so we chose React 17 as the foundation for ReactLynx, evolving into the Lynx system while retaining the React programming model.

At the same time, we will continue to pay attention to subsequent React advancements, such as React 19 and React Compiler, and attempt to integrate the parts that do not depend on the concurrent architecture into the ReactLynx system.

Documents

Document	Description
built-in-macros	-
directives	-

Classes

Class	Description
Component	-
MainThreadRef	A `MainThreadRef` is a ref that can only be accessed on the main thread. It is used to preserve states between main thread function calls. The data saved in `current` property of the `MainThreadRef` can be read and written in multiple main thread functions.
PureComponent	-

Interfaces

Interface	Description
DataProcessorDefinition	Definition of DataProcessor(s)
DataProcessors	The data processors that registered with Lynx.registerDataProcessors.
InitData	The interface you can extends so that the `defaultDataProcessor` returning value can be customized
InitDataRaw	The interface you can extends so that the `defaultDataProcessor` parameter can be customized
Lynx	APIs under `lynx` global variable that added by ReactLynx.
Root	The default root exported by `@lynx-js/react` for you to render a JSX

Variables

Variable	Description
root	The default and only root of ReactLynx for you to render JSX

Functions

Function	Description
cloneElement	-
createContext	Lets you create a Context that components can provide or read.
createElement	-
createRef	-
forwardRef	Lets your component expose a DOM node to a parent component using a ref.
Fragment	Lets you group elements without a wrapper node.
isValidElement	-
lazy	Lets you defer loading a component’s code until it is rendered for the first time.
memo	Lets you skip re-rendering a component when its props are unchanged.
runOnBackground	`runOnBackground` allows triggering js functions on the background thread asynchronously.
runOnMainThread	`runOnMainThread` allows triggering main thread functions on the main thread asynchronously.
Suspense	Lets you display a fallback until its children have finished loading.
useCallback	`useCallback` will return a memoized version of the callback that only changes if one of the `inputs` has changed.
useContext	Accepts a context object (the value returned from `React.createContext`) and returns the current context value, as given by the nearest context provider for the given context.
useDebugValue	`useDebugValue` can be used to display a label for custom hooks in React DevTools.
useEffect	Accepts a function that contains imperative, possibly effectful code. The effects run after main thread dom update without blocking it.
useImperativeHandle	`useImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`. As always, imperative code using refs should be avoided in most cases.
useInitData	A React Hooks for you to get `initData`. If `initData` is changed, a re-render will be triggered automatically.
useInitDataChanged	A React Hooks for you to get notified when `initData` changed.
useLayoutEffect	`useLayoutEffect` is now an alias of `useEffect`. Use `useEffect` instead.
useLynxGlobalEventListener	`useLynxGlobalEventListener` help you `addListener` as early as possible.
useMainThreadRef	Create A `MainThreadRef`.
useMemo	`useMemo` will only recompute the memoized value when one of the `deps` has changed.
useReducer	An alternative to `useState`.
useRef	`useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component.
useState	Returns a stateful value, and a function to update it.
useSyncExternalStore	-
withInitDataInState	Higher-Order Component (HOC) that injects `initData` into the state of the given class component.

Components

Function	Description
InitDataConsumer	The Consumer Component that provide `initData`. This should be used with InitDataProvider
InitDataProvider	The Provider Component that provide `initData`, you must wrap your JSX inside it

#@lynx-js/react

#React APIs

#Documents

#Classes

#Interfaces

#Variables

#Functions

#Components