Detecting production vs. development React at runtime

This is best done emulating the Node way of doing things with your build tool - webpack, browserify - by exposing process.env.NODE_ENV. Typically, you'll have it set to "production" in prod and "development" (or undefined) in dev.

So your code becomes:

if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    // dev code
} else {
    // production code
}

For how to set it up, see envify or Passing environment-dependent variables in webpack

I use a helper file (in Typescript):

import process from "process";

const development: boolean = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';

export default function isDev(): boolean
{
    return development;
}

Then elsewhere I use it like this:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}