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:
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) {
...
}
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