56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import NoSsr from '@mui/material/NoSsr';
|
||
|
|
|
||
|
|
function LargeTree(): any {
|
||
|
|
return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function FrameDeferring() {
|
||
|
|
const [state, setState] = React.useState({
|
||
|
|
open: false,
|
||
|
|
defer: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() =>
|
||
|
|
setState({
|
||
|
|
open: !state.open,
|
||
|
|
defer: false,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{'Render NoSsr defer="false"'}
|
||
|
|
</button>
|
||
|
|
<br />
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() =>
|
||
|
|
setState({
|
||
|
|
open: !state.open,
|
||
|
|
defer: true,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{'Render NoSsr defer="true"'}
|
||
|
|
</button>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Box sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
|
||
|
|
{state.open ? (
|
||
|
|
<React.Fragment>
|
||
|
|
<div>Outside NoSsr</div>
|
||
|
|
<NoSsr defer={state.defer}>
|
||
|
|
.....Inside NoSsr
|
||
|
|
<LargeTree />
|
||
|
|
</NoSsr>
|
||
|
|
</React.Fragment>
|
||
|
|
) : null}
|
||
|
|
</Box>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|