Disable/Hide "Download the React DevTools..."

Question

How do you completely disable or hide the "persistent" console message: Download the React DevTools for a better development experience while in development?

Answer 1

As of React 16.2.0, you can add a line like this to your webpack configuration:

  new webpack.DefinePlugin({
    '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
  }),

This disables all logs about React DevTools.

Answer 2

Put this line somewhere in the global scope (it won't work if you put it inside a bundled module):

__REACT_DEVTOOLS_GLOBAL_HOOK__ = true;

Here's a related gist from Ryan Florence that's the basis for the above hack:

if (
  process.env.NODE_ENV === 'production' &&
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
  Object.keys(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).length
) {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers = {}
}

---

Update: React 16 has a new console warning that reads Warning: The installed version of React DevTools is too old and will not work with the current version of React. Please update React DevTools. To disable it, put this code in the global scope:

__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
  supportsFiber: true,
  inject: function() {},
  onCommitFiberRoot: function() {},
  onCommitFiberUnmount: function() {},
};