import { useDevFlag } from "@/hooks/use-dev-flag"
 
function DebugPanel() {
  const isDev = useDevFlag()
 
  if (!isDev) return null
 
  return <div>Debug information only visible in dev mode</div>
}

import { useDevFlag } from "@/hooks/use-dev-flag"
 
function App() {
  const isDev = useDevFlag()
 
  return (
    <div>
      <MainContent />
      {isDev && <DebugPanel />}
    </div>
  )
}

import * as React from "react"
 
import { useDevFlag } from "@/hooks/use-dev-flag"
 
function Component() {
  const isDev = useDevFlag()
  const [data, setData] = React.useState(null)
 
  React.useEffect(() => {
    if (isDev) {
      console.log("Component mounted with data:", data)
    }
  }, [data, isDev])
 
  return <div>{/* Component content */}</div>
}

import { useDevFlag } from "@/hooks/use-dev-flag"
 
function Settings() {
  const isDev = useDevFlag()
 
  return (
    <div>
      <h2>Settings</h2>
      {isDev && (
        <div>
          <button>Reset Database</button>
          <button>Load Test Data</button>
        </div>
      )}
    </div>
  )
}

import * as React from "react"
 
import { useDevFlag } from "@/hooks/use-dev-flag"
 
function ExpensiveComponent() {
  const isDev = useDevFlag()
  const startTime = React.useRef(Date.now())
 
  React.useEffect(() => {
    if (isDev) {
      const duration = Date.now() - startTime.current
      console.log(`Component render took ${duration}ms`)
    }
  })
 
  return <div>{/* Component content */}</div>
}