This simple component takes 200ms to render in JSDOM environment on my laptop:
function Demo() {
return (
<FocusLock>
<button>Test</button>
<button>Test</button>
<button>Test</button>
</FocusLock>
);
}
I investigated why this is happening, found the bottleneck in isElementHidden function. It calls window.computedStyle for each node and all their parents, but this is an expensive operation in JSDOM (~5ms for me). The more nodes in DOM, the slower it becomes.
Here you can also find the demo to reproduce with the same dependencies (latest create-react-app): https://github.com/just-boris/thousand-cuts
This simple component takes 200ms to render in JSDOM environment on my laptop:
I investigated why this is happening, found the bottleneck in isElementHidden function. It calls
window.computedStylefor each node and all their parents, but this is an expensive operation in JSDOM (~5ms for me). The more nodes in DOM, the slower it becomes.Here you can also find the demo to reproduce with the same dependencies (latest create-react-app): https://github.com/just-boris/thousand-cuts