Skip to main content

track()

Returns a tracked version of the given component. Any signals whose values are read while the component renders will be tracked. If any of the tracked signals change later it will cause the component to re-render.

This also wraps the component in a React.memo() call, so it will only re-render if the props change.

Example​

const Counter = track(function Counter(props: CounterProps) {
  const count = useAtom('count', 0)
  const increment = useCallback(() => count.set(count.value + 1), [count])
  return <button onClick={increment}>{count.value}</button>
})

Signature​

track<T>(baseComponent: T): T extends React.MemoExoticComponent<any> ? T : React.MemoExoticComponent<T>;

Type parameters​

  • T extends FunctionComponent<any, T>

Parameters​

NameType
baseComponentT

Returns​

T extends React.MemoExoticComponent<any> ? T : React.MemoExoticComponent<T>

Defined in: signia-react/src/track.ts:45