Is there a way in React -- either in code or via the React devtools -- to see if a ponent is being rendered in React's StrictMode? In my dream world, there would be some kind of constant I could console.log, say a bool of React.isStrictModeOnForThisComponentRendering; or maybe when you inspect a ponent in the React devtools, it would say somewhere in the side panel if it's rendering in StrictMode or not.

To be clear, this question is:

• Not about how do you enable StrictMode. (The answer is <React.StrictMode>, although it can also be set via configs in some frameworks, e.g., Next.js)
• Specifically discussing React's StrictMode, not JavaScript's ('use strict';) or TypeScript's strict mode. It's an overloaded phrase, but watcha gonna do?
• Motivated by the confusion you get due to unexpected double rendering with React's StrictMode. See this GitHub issue or this StackOverflow post for a sense of the frustration it can cause. It would be nice to have an easy way to verify a ponent is running in StrictMode even if you can't tell where in the ponent tree StrictMode has been enabled.

Is there a way in React -- either in code or via the React devtools -- to see if a ponent is being rendered in React's StrictMode? In my dream world, there would be some kind of constant I could console.log, say a bool of React.isStrictModeOnForThisComponentRendering; or maybe when you inspect a ponent in the React devtools, it would say somewhere in the side panel if it's rendering in StrictMode or not.

To be clear, this question is:

• Not about how do you enable StrictMode. (The answer is <React.StrictMode>, although it can also be set via configs in some frameworks, e.g., Next.js)
• Specifically discussing React's StrictMode, not JavaScript's ('use strict';) or TypeScript's strict mode. It's an overloaded phrase, but watcha gonna do?
• Motivated by the confusion you get due to unexpected double rendering with React's StrictMode. See this GitHub issue or this StackOverflow post for a sense of the frustration it can cause. It would be nice to have an easy way to verify a ponent is running in StrictMode even if you can't tell where in the ponent tree StrictMode has been enabled.

• javascript
• reactjs
• react-strictmode

Share Improve this question Follow edited Jul 15, 2023 at 14:14 Bergi 666k161161 gold badges1k1k silver badges1.5k1.5k bronze badges asked Jun 7, 2022 at 0:38 Erdős-BaconErdős-Bacon 9281010 silver badges1717 bronze badges 4

• I didn't think it could be not obvious when it's "on". The docs are pretty clear and explicit in a note right at the top of the page. If you are running a development build and are rendering the app into a React.StrictMode ponent, it's "on". – Drew Reese Commented Jun 7, 2022 at 5:08
• 3 @DrewReese: yeah, you'd think so, but turns out I'm in a case where it's not obvious. I'm like 95% sure I'm seeing a double render useEffect problem due to StrictMode, but React.StrictMode is nowhere in my codebase, nor is it enabled via Next.js config. However, if I wrap the problematic ponent with <React.StrictMode>, the doubling issue does not double again into quadruple, so that seems to indicate the ponent is already in StrictMode, but I can't find anywhere that would be causing it. – Erdős-Bacon Commented Jun 7, 2022 at 16:11
• 1 In case you're still looking for this, I'm using a hook that checks console overrides to detect strict mode: github./Oblosys/react-hook-tracer/blob/v1.2.0/packages/… – Oblosys Commented Nov 7, 2022 at 14:26
• @Erdős-Bacon I came here for exactly the same reason. I created a production version of the app for the same basic ponent and it was firing only 1 useEffect. So I know that even though I removed the <React.SctrictMode> provider the number of effects are two, now we can have two possiblities, it runs twice always in development or the React StrictMode is enforced somewhere else. Having different behaviour depending on environment is baffling to me. – Mg Gm Commented Oct 20, 2023 at 22:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

It's not a clear or definitive way, but you can purposefully trigger a warning that is supposed to only occur in React's StrictMode. For example:

• You could purposefully create a dummy ponent that makes use of an unsafe lifecycle, and it should trigger a warning. This is a bit of a hassle since -- if you're using only functional ponents throughout your app -- you must create a class ponent to make use of the unsafe lifecycle methods.
• You could purposefully use a (deprecated) string ref in a ponent, and it should trigger a warning. This is easier but uglier than the above with functional ponents: you can put it in any ponent's JSX, but it will cause your app to just pletely break if it's a functional ponent. But the warning should at least still appear before the app breaks. CAVEAT: I just tried reproducing this and while I'm still confident my app is in React StrictMode, I can no longer get the string ref to trigger the warning as I had been seeing it before, it's only breaking the app. Not sure what has changed or I'm doing differently, but this might not be as good a check as the above option.

In any case, this warning will contain some text like this

... found within a strict-mode tree ...

which seems like reasonably good proof that the ponent is rendering in StrictMode. Would be nice to have a more direct helper function, but it works in a pinch.