useRef<T> function

Ref<T?> useRef<T>([ T? initialValue ])

Returns an empty mutable Ref object.

To initialize a ref with a value, use useRefInit instead.

Changes to the Ref.current property do not cause the containing uiFunction component to re-render.

The returned Ref object will persist for the full lifetime of the uiFunction component. Compare to createRef which returns a new Ref object on each render.

Note: there are two rules for using Hooks:

• Only call Hooks at the top level.
• Only call Hooks from inside the first argument of uiFunction.

Example:

UiFactory<UseRefExampleProps> UseRefExample = uiFunction(
  (props) {
    final inputValue = useState('');

    final inputRef = useRef<InputElement>();
    final prevInputValueRef = useRef<String>();

    useEffect(() {
      prevInputValueRef.current = inputValue.value;
    });

    return Fragment()(
      Dom.p()(
        'Current Input: ${inputValue.value}, '
        'Previous Input: ${prevInputValueRef.current}',
      ),
      (Dom.input()..ref = inputRef)(),
      (Dom.button()
        ..onClick = (_) => inputValue.set(inputRef.current.value)
      )('Update'),
    );
  },
  _$UseRefExampleConfig, // ignore: undefined_identifier
);

Learn more: reactjs.org/docs/hooks-reference.html#useref.

Implementation

Ref<T?> useRef<T>([
  // TODO(FED-2136) uncomment this deprecation
  // @Deprecated('Use `useRefInit` instead to create refs with initial values.'
  //     ' Since the argument to useRefInit is required, it can be used to create a Ref that holds a non-nullable type,'
  //     ' whereas this function can only create Refs with nullable type arguments.')
  T? initialValue,
]) =>
    // ignore: deprecated_member_use
    react_hooks.useRef(initialValue);