React DevTools Integration: Custom Component Inspector

This challenge focuses on enhancing the React developer experience by integrating custom information into the React DevTools. You will create a React component that, when selected in DevTools, displays specific application-defined metadata alongside its standard props and state. This is a valuable skill for debugging complex applications and providing richer context for developers.

Problem Description

Your task is to develop a React component that exposes custom debug information to React DevTools. This information should be accessible when the component is inspected using the DevTools. You need to leverage the __DEV__ flag and potentially other mechanisms to conditionally expose this information for development builds only.

Key Requirements:

1. Create a React Component: Design a reusable React component (e.g., DebuggableCard).
2. Expose Custom Data: This component should have a mechanism to define and expose custom debug data (e.g., internalId, lastUpdatedTimestamp).
3. DevTools Integration: This custom data should appear in the "Props" or a dedicated "Debug Info" section within the React DevTools when the component is selected.
4. Development Build Only: The custom data exposure should only be active in development builds, not in production builds.
5. TypeScript: Implement the solution using TypeScript for type safety.

Expected Behavior:

• When the DebuggableCard component is rendered and inspected in React DevTools during a development build, you should see its regular props, along with the custom internalId and lastUpdatedTimestamp.
• In a production build, these custom fields should NOT be visible in the DevTools inspector.

Edge Cases:

• What happens if the custom data is not present or undefined? The DevTools should handle this gracefully (likely by not displaying the field).
• Ensure the integration doesn't negatively impact component performance in production.

Examples

Example 1: Basic Integration

// In your React component file:
import React from 'react';

interface DebuggableCardProps {
  title: string;
  content: string;
  // Add any other standard props
}

// Assume this is where your custom data would be generated or passed
interface CustomDebugData {
  internalId: string;
  lastUpdatedTimestamp: number;
}

const DebuggableCard: React.FC<DebuggableCardProps & Partial<CustomDebugData>> = (props) => {
  const { title, content, internalId, lastUpdatedTimestamp } = props;

  // Logic to conditionally expose debug data
  const devToolsProps = {
    title,
    content,
    ...(process.env.NODE_ENV !== 'production' && { // Example conditional logic
      internalId: internalId ?? 'N/A',
      lastUpdatedTimestamp: lastUpdatedTimestamp ?? Date.now(),
    }),
  };

  return (
    <div className="card">
      <h3>{title}</h3>
      <p>{content}</p>
      {/* Other component rendering */}
    </div>
  );
};

// Usage in another component:
const App = () => {
  return (
    <DebuggableCard
      title="My First Card"
      content="This is a sample card for demonstration."
      internalId="card-123"
      lastUpdatedTimestamp={Date.now()}
    />
  );
};

Explanation:

When DebuggableCard is selected in React DevTools during development, its props should appear as:

Props:
  title: "My First Card"
  content: "This is a sample card for demonstration."
  internalId: "card-123"
  lastUpdatedTimestamp: 1678886400000 // (actual timestamp)

In a production build, internalId and lastUpdatedTimestamp would not be present in the DevTools inspector.

Example 2: Handling Missing Custom Data

// Same DebuggableCard component as Example 1

// Usage in another component:
const App = () => {
  return (
    <DebuggableCard
      title="Card Without Custom Data"
      content="This card won't expose custom dev info."
    />
  );
};

Explanation:

When DebuggableCard (without internalId and lastUpdatedTimestamp) is selected in React DevTools during development, its props should appear as:

Props:
  title: "Card Without Custom Data"
  content: "This card won't expose custom dev info."

The custom fields are not shown because they were not provided.

Constraints

• The solution must be implemented in TypeScript.
• The custom debug information should only be exposed in development builds (e.g., when process.env.NODE_ENV === 'development').
• The solution should not introduce significant performance overhead in production builds.
• The integration should be compatible with standard React DevTools.

Notes

• React DevTools automatically inspects the props object of a component. Anything you pass as a prop will be visible.
• Consider how you might pass or derive this custom debug information. It could be directly passed as props, or derived from internal state/context if appropriate for debugging.
• The __DEV__ global variable is often available in build tools like Webpack or Vite and automatically set based on the build environment. You can also use process.env.NODE_ENV.
• Think about the best way to type the props to allow for both standard props and optional debug props.
• For a more advanced approach, explore React's experimental React.forwardRef and React.useImperativeHandle for more direct control over what's exposed, though directly passing props is usually sufficient for this level of integration.