Prevent rerendering of child component on input change - reactjs

Question

I have a component in reactjs where i define 2 states input and resultlist(an array). My functionality is like, I will enter some input click on search, call an api, set search results in result list. Now my problem is my search result is very huge. Once resultlist is populated first time, then whenever I am typing input it is rerendering whole component on each keypress including resultlist which is lagging a lot. How to handle this issue.
I tried using usememo on resultlist but it is not working. I don't want my Child to rerender on every keyspress in input.
const comp1 = () => {
const [input, setinput] = useState('');
const [resultlist, setresultlist] = useState([]);
const fetchResult = () =>{
fetch('some url') // returns a very long list of items(10k +)
.then(res=>setresultlist(res));
}
return <>
<input value={input} onChange={(e)=>setinput(e.target.value)}></input>
<button oncClick={fetchResult}></button>
<Child resultlist={resultlist} />
</>
}
const Child = ({resultlist}) => {
return <>
{resultlist.map(element=><div>element</div>)}
</>
}

Answer 1

I found a solution.
const Parent = () => {
const [resultlist, setresultlist] = useState([]);
return <>
<comp1 setresultlist={setresultlist} />
<Child resultlist={memoizedResultList} />
</>
}
const comp1 = ({setresultlist}) => {
const [input, setinput] = useState('');
const fetchResult = () =>{
fetch('some url') // returns a very long list of items(10k +)
.then(res=>setresultlist(res));
}
return <>
<input value={input} onChange={(e)=>setinput(e.target.value)}></input>
<button oncClick={fetchResult}></button>
</>
}
const Child = ({resultlist}) => {
return <>
{resultlist.map(element=><div>element</div>)}
</>
}