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 a DartFunctionComponent.

Example:

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

  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;
}

final FriendListItem = react.registerFunctionComponent((props) {
  final isOnline = useFriendStatus(props['friend']['id']);

  return react.li({
    'style': {'color': isOnline.value ? 'green' : 'black'}
  }, [
    props['friend']['name']
  ]);
}, displayName: 'FriendListItem');

final UseDebugValueTestComponent = react.registerFunctionComponent(
    (Map props) => react.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'}
          }, []),
        ]),
    displayName: 'useDebugValueTest');

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

Implementation

dynamic useDebugValue<T>(T value, [dynamic Function(T)? format]) {
  if (format == null) {
    return React.useDebugValue(value);
  }
  return React.useDebugValue(value, allowInterop(format));
}