I have very complex component which takes long time to render, and I want this component shown in a child Window (created by Window.open()) once the user clicks a button.
So, I'd like to pre-render this component in the main window first, then, just move the rendered component into the child window on button click, which could improve the performance since everything has been rendered.
Below is the component that I want to pre-render which might have some sub components:
export default observer(function MyComp(props: MyCompProps) {
...
return (
<div>Some complex sub components</div>
);
});
I am wondering if there is a way to do that. Any suggestion would be appreciated.
Remember that React has a rule, all components must have the first capital letter.
About your doubt, you can use the useState() hook to set the component's value to false and only when you click on the button it opens inside the window you want.
export default observer(function MyComp(props: MyCompProps) {
const [isOpenComponent, setIsOpenComponent] = useState(false);
function handleOpen() {
setIsOpenComponent(true);
}
return (
<div>
<div>Some complex sub components</div>
<div isOpenComponent> Component that you want to open</div>
<button type="button" onClick={handleOpen}>Open Component</div>
</div>
</div>
);
});
This is only an idea to implement your case.