Search code examples
javascriptreactjsreact-devtools

In React Dev Tools Profiler Flamegraph, what is an "Insertion" component?

If I run the React dev tools profiler, and then look at the flamegraph, I can see various react components and their rendering times. Such as

ForwardRef(DataGridPremium) (<0.1ms of 1996ms)
GridContextProvider (<0.1ms of 1996ms)
MuiTextFieldRoot (<0.1ms of 229ms)

But there is also an item listed as if it was a react component, called Insertion, with a render time:

Insertion (528ms of 528ms)

It looks like this in a flamegraph, with an orange background:

Screenshot of a react dev tools profiler flamegraph, with the Insertion component having an orange background

I've found nothing in the react docs, the react dev tool docs, or on google. Many results bring me to useInsertionEffect but I don't think that's related as we have statically compiled CSS to the best of my understanding.

What is this Insertion? Is it a component? I obviously could guess that it means the time to insert DOM nodes, but I don't want to make assumptions. There's no components in our codebase that match this name, nor in our libraries it seems, from a grep.

Edit: I did find this in @mui/material/umd/material-ui.development.js:4730, perhaps it's that? I'd like to find a way to confirm that if possible, so I can investigate why it's our longest time to render thing.

  var Insertion = function Insertion(_ref) {
    ...
  }
Solution

  • It’s a component from Emotion (the CSS-in-JS library MUI uses). See more here: https://github.com/emotion-js/emotion/blob/main/packages/styled/src/base.js#L27