useDebugValue

External Documentation

void useDebugValue<T>(

  1. T value, [

  2. String format(
    1. T
    )?
])

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

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

Note: there are two rules for using Hooks:

  • Only call Hooks at the top level.
  • Only call Hooks from inside a function component.

Example:

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

useEffect(() {
ChatAPI.subscribeToFriendStatus(friendID, (status) {
isOnline.set(status['isOnline']);
});
return () {
ChatAPI.unsubscribeFromFriendStatus(friendID);
};
});


// Use format function to avoid unnecessarily formatting isOnline
useDebugValue<bool>(
isOnline.value,
(isOnline) => isOnline ? 'Online' : 'Not Online',
);


return isOnline;
}

Implementation

void useDebugValue<T>(T value, [String Function(T)? format]) {
  final jsValue = _toJsAny(value);
  JSString jsFormatFn(JSAny? v) {
    final dartValue = switch (v) {
      null => value,
      final jsVal => switch (jsVal.dartify()) {
        final T val => val,
        _ => value, // fallback to original value
      },
    };
    return format!(dartValue).toJS;
  }

final jsFormat = (format != null) ? jsFormatFn.toJS : null;


_reactUseDebugValue(jsValue, jsFormat);
}