@lynx-js/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

#Parameters

#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/snapshot/worklet/ref/workletRef.d.ts:55

#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

#Parameters

#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/snapshot/worklet/ref/workletRef.d.ts:94

#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

#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/snapshot/worklet/ref/workletRef.d.ts:131