useDebugValue<T> function

dynamic useDebugValue<T>(T value, [ dynamic format(T)? ])

Displays value as a label for a custom hook in React DevTools.

To defer formatting value until the hooks are inspected, use optional format function.

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:

class ChatAPI {
  static void subscribeToFriendStatus(int id, Function handleStatusChange) =>
      handleStatusChange({'isOnline': id % 2 == 0});

  static void unsubscribeFromFriendStatus(
      int id, Function handleStatusChange) =>
      handleStatusChange({'isOnline': false});
}

// Custom Hook
StateHook useFriendStatus(int friendID) {
  final isOnline = useState(false);

  void handleStatusChange(Map status) {
    isOnline.set(status['isOnline']);
  }

  useEffect(() {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  // Use format function to avoid unnecessarily formatting `isOnline` when the hooks aren't inspected in React DevTools.
  useDebugValue<bool>(
      isOnline.value, (isOnline) => isOnline ? 'Online' : 'Not Online');

  return isOnline;
}

mixin FriendListItemProps on UiProps {
  Map<String, dynamic> friend;
}

UiFactory<FriendListItemProps> FriendListItem = uiFunction(
  (props) {
    final isOnline = useFriendStatus(props.friend['id']);

    return (Dom.li()..style = {'color': isOnline.value ? 'green' : 'black'})(
      props.friend['name'],
    );
  },
  _$FriendListItemConfig, // ignore: undefined_identifier
);

UiFactory<UseDebugValueExampleProps> UseDebugValueExample = uiFunction(
  (props) => Fragment()(
    (FriendListItem()..friend = {'id': 1, 'name': 'user 1'})(),
    (FriendListItem()..friend = {'id': 2, 'name': 'user 2'})(),
    (FriendListItem()..friend = {'id': 3, 'name': 'user 3'})(),
    (FriendListItem()..friend = {'id': 4, 'name': 'user 4'})(),
  ),
  _$UseDebugValueExampleConfig, // ignore: undefined_identifier
);

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

Implementation

dynamic useDebugValue<T>(T value, [dynamic Function(T)? format]) => react_hooks.useDebugValue(value, format);