Loading...
Please waitLoading...
Please waitpnpm dlx uselab@latest add use-dev-flag
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>
}The hook provides a simple boolean flag that's true only in development mode, perfect for conditionally enabling debug tools, dev features, or testing utilities.
useDevFlag()Returns a boolean indicating if the application is running in development mode.
| Return Type | Description |
|---|---|
boolean | true when NODE_ENV === "development", otherwise false |
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>
}true when process.env.NODE_ENV === "development"process.env.NODE_ENV directly in componentsYou're running in production mode. Dev-only features are disabled.
Dev-only features are hidden in production mode.
Run the app in development mode to see dev features.
useDevFlag() to get a boolean indicating dev modetrue when NODE_ENV is "development"