Folder Structure
App.js Code
import { useState } from 'react'
import List from './List';
export default function App() {
const [input, setInput] = useState("");
function handleChange(e) {
setInput(e.target.value);
};
// console.log('app.js component');
return (
<>
<input type="text" value={input} onChange={handleChange} />
<List input={input} />
</>
)
}
List.js Code
import { useMemo, useDeferredValue, useEffect } from 'react'
export default function List({ input }) {
const LIST_SIZE = 20000;
const defferedInput = useDeferredValue(input);
const list = useMemo(() => {
// console.log('children usememo hook');
const l = [];
for (let i = 0; i < LIST_SIZE; i++) {
l.push(<span key={i}> {defferedInput} </span>)
}
return l;
}, [defferedInput])
useEffect(() => {
console.log('input', input);
console.log('defferedInput', defferedInput);
}, [input, defferedInput])
// console.log('children component');
return list;
}
Output
Top comments (0)