useRef<T> function

Ref<T?> useRef<T>([ @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 ])

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 DartFunctionComponent to re-render.

The returned Ref object will persist for the full lifetime of the DartFunctionComponent. 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 a DartFunctionComponent.

Example:

UseRefTestComponent(Map props) {
  final inputValue = useState('');

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

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

  return react.Fragment({}, [
    react.p({}, ['Current Input: ${inputValue.value}, Previous Input: ${prevInputValueRef.current}']),
    react.input({'ref': inputRef}),
    react.button({'onClick': (_) => inputValue.set(inputRef.current.value)}, ['Update']),
  ]);
}

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

Implementation

Ref<T?> useRef<T>([
  @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,
]) =>
    useRefInit(initialValue);