CODEWITHSUNDEEP
reactjsreact-strictmode
babbego
babbego

Reputation: 181

How to disable react strict mode on third party libraries

We use strict mode in our React app. But third parties does not use strict mode. How can I achieve this?

Upvotes: 18

Views: 5711

Answers (3)

Daham Akl
Daham Akl

Reputation: 628

It's better if you can provide any code of your application where you used StrictMode. I think this is possible. but the issue is where you used StrictMode. You must use it globally to achieve StrictMode for all components and libraries. And it's better if you can mention which third part library that StrictMode is not working.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Like in this code try to use it by wrapping for the main app component. And also there may be some restrictions for the third-party library use have used. Please check it our.

Upvotes: 0

Mr. Eivind
Mr. Eivind

Reputation: 226

You can probably not disable strict mode for third party libraries only, but you can apply strict mode to only a subset of your own code. If the non-strict third party libraries are only used in specific parts of the app, the rest of the app can be in strict mode.

Here is an example:

<div>
  <div>
    Non-strict code containing third party libraries
  </div>
  <React.StrictMode>
    <div>
      Strict code here
    </div>
  </React.StrictMode>
</div>

If the third party libraries are used in a lot of places, this will be more problematic.

Upvotes: 1

Mustafa Bin
Mustafa Bin

Reputation: 69

In index.js file remove the React.StrictMode wrapper.

From this

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
     <App />
  </React.StrictMode>
);

To this

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Upvotes: 1

Related Questions