I'm trying to write code that incrementally renders a lot of components onto the screen and my understanding is that react-fiber is supposed to help with that process. Is there a way to test and see if it's actually doing anything to help?
The whole reason I want to do this is to make the first hundred lines render quickly while the last, say, 2000 can render slower as they're out of the user's window at the time of page load
This isn't my actual code, more just a proof of concept but it still just pops in all at once and looking at the the performance browser tools it seems like it all gets rendered at once too.
https://do-react-fibers-do-anything.glitch.me/
class App extends Component {
constructor() {
super()
this.state = {
count: 0,
items: [],
}
}
render() {
return (
<div>
count { this.state.count }
<button onClick={() => {
this.setState({
count: this.state.count+1,
items: items(),
})
}}>do it</button>
{
this.state.items.map(
function(item) {
const turns = item / 10
const style = {
backgroundColor: `hsl(${turns}turn, 50%, 50%)`,
}
if (Math.floor(item) % 2) {
return <span style={style}></span>
} else {
return <code style={style}></code>
}
}
)
}
</div>
)
}
}
function items() {
const items = []
performance.mark('start calculating items')
for (let index = 0; index < 10000; index++) {
items.push(Math.random()*10)
}
performance.mark('done calculating items')
performance.measure('calculating random items', 'start calculating items', 'done calculating items')
return items
}
I'd expect it to render in a more sectioned way if that makes any sense. Am I trying to go about testing/visualizing this incorrectly or is something else going on? Thanks
