How to hide componentWillMount warnings

Question

I'm getting four big warnings that can not be minimized in my console. These warnings are from what I understand not because I have done anything wrong, but because react-router-dom and react-select use the deprecated componentWillMount function. How do I get rid of the warnings?

I have tried looking up the problem on this site, but the closest to a solution I have found is https://stackoverflow.com/a/49166225/12057512. Since the answer is from over a year ago I am wondering if this is still the case. Have these big/popular npm packages still not updated since then?

This is one of the warnings I get (the others are similar):

react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See https:// fb . me/react-async-component-lifecycle-hooks for details.

Move code with side effects to componentDidMount, and set initial state in the constructor.

Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: BrowserRouter, Route, Router, Switch

(I actually tried to run "npx react-codemod rename-unsafe-lifecycles" but it made no difference)

I have no control over how these npm packages work internally, so I find it frustrating that I constantly get these warnings that I can not fix or remove.

score 7 · Answer 1 · edited Dec 16 '20 at 19:01

7

The best I found..

const warn = console.warn;

function logWarning(...warnings){
  let showWarning = true;
  warnings.forEach(warning => {
    if (warning.includes("UNSAFE_")) showWarning = false;
    else if (warning.includes("SourceMap")) showWarning = false;
    else if (warning.includes("DevTools")) showWarning = false;
  });
  if(showWarning) warn(...warnings);
}


console.warn  = logWarning;

edited Dec 16 '20 at 19:01

simmer

2,639
1
18
22

answered Mar 23 '20 at 17:40

JeanMGirard

171
2
7

1

Hi @jeanmgirard. Isn't the colon after `...warnings` in the parameter list a typo? Or is it some syntax I'm not aware of? – steinar Jun 25 '20 at 11:44
@steinar Its Typescript. Should be `Array<['UNSAFE_' | 'SourceMap' | 'DevTools']>` probably – AndyFaizan Oct 14 '20 at 15:07

score 6 · Answer 2 · answered Sep 12 '19 at 10:27

6

The common way to fix this would be to update the affected libraries (as you say react-router and react-select). If these are being maintained, then they would release new versions that don't produce these warnings. If that is not an option for you, then I don't know, I don't think React has a way of suppressing specific warnings.

Note that the warnings are only shown in the dev build of React, they won't be shown in the production build of React (see DOCs).

answered Sep 12 '19 at 10:27

Vladimir Rovensky

4,684
1
13
16

Thank you so much! I had used "npm update" several times, but apparently react-router-dom had not been updated properly. This fixed the problem completely. – Emil Karlsson Sep 12 '19 at 11:19
The latest released version of react-select apparently hasn't fixed this problem yet, but they have fixed it in an unreleased version. So I guess I'll just have to wait a few weeks and then the last part of this problem will be fixed. https://github.com/JedWatson/react-select/issues/3720 – Emil Karlsson Sep 12 '19 at 12:19
1

The question was "How to hide ... messages", not how to fix the reason. So it doesn't really answer the actual question and hence must not have been accepted. – Onkeltem Jan 28 '20 at 11:10
1

@Onkeltem It solved the problem, so I assumed I was supposed to mark it as correct. But I suppose you are right, since the same problem may occur due to other reasons as well. I have unmarked it now. – Emil Karlsson Mar 27 '20 at 13:39

reubennn · Answer 3 · 2021-07-27T13:52:02.757

JeanMGirard's answer causes Uncaught RangeError: Maximum call stack size exceeded in some instances like when you forget to add dependencies to the dependency array within the useEffect React Hook. This can make it very hard to debug certain bugs in your code.

Normally, React DevTools would handle this by displaying the warning cause and possible solutions.

Here's a solution which ensures React DevTools handles our warnings as normal, but hides the UNSAFE_ warnings:

const backup = console.warn;

console.warn = function filterWarnings(warning) {
    // If the warning includes any of the following text, let's hide it.
    const supressedWarnings = [
        "Warning: componentWillMount has been renamed, and is not recommended for use.",
        "Warning: componentWillReceiveProps has been renamed, and is not recommended for use.",
        "Warning: componentWillUpdate has been renamed, and is not recommended for use.",
    ];

    if (warning.length && !supressedWarnings.some(entry => warning.includes(entry))) {
        backup.apply(console, arguments);
    }
};

score 0 · Answer 4 · edited Sep 12 '19 at 12:54

0

Use code below:

console.disableYellowBox = true;

edited Sep 12 '19 at 12:54

Robert Columbia

6,313
15
32
40

answered Sep 12 '19 at 10:38

OsamaD

453
7
12

2

That does not seem to work. Also, the reason why I want to get rid of those warnings is so that I can see the warnings that are relevant. Doesn't your code disable *all* warnings? – Emil Karlsson Sep 12 '19 at 11:11
3

this is for react-native, not reactJS – CrsCaballero Dec 05 '19 at 00:01

score -2 · Answer 5 · answered May 21 '20 at 07:20

-2

In index.android.js, you can use:

  console.disableYellowBox = true
  console.warn = () => {}

answered May 21 '20 at 07:20

J. Dat

1
2

How to hide componentWillMount warnings

5 Answers5

Linked