ReactLynx logoReactLynx logo
ReactLynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

react / useMainThreadRef

Function: useMainThreadRef()

useMainThreadRef(initValue)

function useMainThreadRef<T>(initValue: T): MainThreadRef<T>

Create A 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.

It is a hook and it should only be called at the top level of your component.

Type Parameters

Type Parameter
T

Parameters

ParameterTypeDescription
initValueTThe init value of the MainThreadRef.

Returns

MainThreadRef<T>

Example

import { useMainThreadRef } from '@lynx-js/react'
import type { MainThread } from '@lynx-js/types'

export function App() {
  const ref = useMainThreadRef<MainThread.Element>(null)

  const handleTap = () => {
    'main thread'
    ref.current?.setStyleProperty('background-color', 'blue')
  }

  return (
    <view
      main-thread:ref={ref}
      main-thread:bindtap={handleTap}
      style={{ width: '300px', height: '300px' }}
    />
  )
}

Defined in

@lynx-js/react/runtime/lib/worklet/workletRef.d.ts:54

useMainThreadRef(initValue)

function useMainThreadRef<T>(initValue: null | T): RefObject<T>

Create A 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.

It is a hook and it should only be called at the top level of your component.

Type Parameters

Type Parameter
T

Parameters

ParameterTypeDescription
initValuenull | TThe init value of the MainThreadRef.

Returns

RefObject<T>

Example

import { useMainThreadRef } from '@lynx-js/react'
import type { MainThread } from '@lynx-js/types'

export function App() {
  const ref = useMainThreadRef<MainThread.Element>(null)

  const handleTap = () => {
    'main thread'
    ref.current?.setStyleProperty('background-color', 'blue')
  }

  return (
    <view
      main-thread:ref={ref}
      main-thread:bindtap={handleTap}
      style={{ width: '300px', height: '300px' }}
    />
  )
}

Defined in

@lynx-js/react/runtime/lib/worklet/workletRef.d.ts:93

useMainThreadRef()

function useMainThreadRef<T>(): MainThreadRef<T | undefined>

Create A 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.

It is a hook and it should only be called at the top level of your component.

Type Parameters

Type ParameterDefault type
Tundefined

Returns

MainThreadRef<T | undefined>

Example

import { useMainThreadRef } from '@lynx-js/react'
import type { MainThread } from '@lynx-js/types'

export function App() {
  const ref = useMainThreadRef<MainThread.Element>(null)

  const handleTap = () => {
    'main thread'
    ref.current?.setStyleProperty('background-color', 'blue')
  }

  return (
    <view
      main-thread:ref={ref}
      main-thread:bindtap={handleTap}
      style={{ width: '300px', height: '300px' }}
    />
  )
}

Defined in

@lynx-js/react/runtime/lib/worklet/workletRef.d.ts:130

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.