A simple solution to a common problem. While developing form after form of an app I'm building based on Next.js I was continually commenting out the dev tools provided by react-hook-form before deploying. Here's a simple AND operator to automate this:

1import { DevTool } from '@hookform/devtools';
2
3{process.env.NODE_ENV === 'development' && (
4  <DevTool control={control} />
5)}

In this example I'm using the aforementioned `react-hook-form` but you can apply this to any dev-only package, I've also found myself using it with @xstate/inspect