console
const MAX = 50000
const list = []
for(let i = 0; i < MAX; i++) {
list.push({id: i, label: Mock.Random.name()})
}
const List = ({keyword}) => {
console.log('List is rendering')
return (
<ul>
{list.filter(item => item.label.includes(keyword)).map(item => <li key={item.id}>{item.label}</li>)}
</ul>
)
}
const App = () => {
const [name, setName] = React.useState('')
return (
<div>
<input value={name} onChange={e => setName(e.target.value)} placeholder="keyword" />
<List keyword={name} />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
<div id="root"></div>
html, body {
margin: 0;
height: 100%;
}
#root {
height: 100%;
}