TraceUpdatesTest() — react Function Reference

Architecture documentation for the TraceUpdatesTest() function in index.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ TraceUpdatesTest() — react Function Reference

Dependency Diagram

graph TD
  0f2de3e4_5bc3_2c37_3d11_cf921f14ff2e["TraceUpdatesTest()"]
  5aa85a12_1605_0a07_5475_5af04b0334ac["index.js"]
  0f2de3e4_5bc3_2c37_3d11_cf921f14ff2e -->|defined in| 5aa85a12_1605_0a07_5475_5af04b0334ac
  style 0f2de3e4_5bc3_2c37_3d11_cf921f14ff2e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/app/TraceUpdatesTest/index.js lines 60–87

export default function TraceUpdatesTest(): React.Node {
  return (
    <div>
      <h2>TraceUpdates Test</h2>

      <div style={{marginBottom: '20px'}}>
        <h3>Standard Component</h3>
        <RegularComponent />
      </div>

      <div style={{marginBottom: '20px'}}>
        <h3>Dialog Component (top-layer element)</h3>
        <DialogComponent />
      </div>

      <div
        style={{marginTop: '20px', padding: '10px', border: '1px solid #ddd'}}>
        <h3>How to Test:</h3>
        <ol>
          <li>Open DevTools Components panel</li>
          <li>Enable "Highlight updates when components render" in settings</li>
          <li>Click increment buttons and observe highlights</li>
          <li>Open the dialog and test increments there as well</li>
        </ol>
      </div>
    </div>
  );
}