Does Sandpack offer an option to turn off StrictMode?

[rebeccapeltz]

The use case for me is sharing sandboxes with images and video. I use it for training. I need to be able to show image lazy downloading in the network inspector. I also need to turn off StrictMode to prevent the double of render of images.

[danilowoz]

Hey! I'm not sure what you mean by StrictMode. Is it React StrictMode? Is this affecting how the network works or is it another feature request?

Thanks

[rebeccapeltz]

When you create a React App using create-react-app or the codesandbox.io React template it wraps the app in the <StrictMode> component like this

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

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode forces apps in development to render twice looking for side effects https://reactjs.org/docs/strict-mode.html
In my Sandpacks I am rendering images. This is for training. I have some demos where we look at the Chrome network tab to see when an image is rendered. If I'm demoing a lazy load, I don't want the image to render until I scroll to it. With Strict Mode applied to the whole App, I will always get all the images on the page rendered before I even start scrolling and then they will get rendered again. If there was an option for Sandpacks to not wrap the <App> in <StrictMode>, it would solve that problem. In codesandbox.io, I can manually remove the StrictMode component from my app.

[danilowoz]

ohh I see. So, you can overwrite this file and remove the StrictMode component, like this:

<Sandpack 
  files={{
    "/index.js": {
      hidden: true,
      code: `import React from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";
const root = createRoot(document.getElementById("root"));
root.render(<App />);
`,
    },
  }}
/>