I want to render the component if its props are updated others don't need to render. But in my code, I can see it's rendering with unexpected behavior.

React Version 17.X.X

See below code

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

app.js file

import React, { useState, useCallback} from 'react'
import ListItem from './ListItem'
function App() {
  const [itemList, setItemList] = useState([]);
  const [counter, setCounter] = useState(0);
  
  const increase = useCallback(() => setCounter(prevState => prevState + 1), counter); 

  return (
    <div className="App">
      <ListItem itemList={itemList} addItem={(val) => setItemList(prev => [...prev,val])}/>
      <button onClick={increase}> Increament Count </button>
    </div>
  );
}

export default App;

ListItem.js

import React, {memo} from 'react';
const ListItem = memo(props) => {
 console.log('listItem render...');
 return (
  <div>{props.itemList.map((c) => <span>{c}</span>)}</div>
  <button onClick={() => props.addItem(props.itemList.length + 1)}>+ Add Item</button>
 )
}

export default ListItem;

You can see my code and now I want to understand how I can avoid unexpected rendering. Because useCallback using I can avoid re-initiation of that method. but the ListItem component if you can see it's rendering Even if you are adding counter value.

Let me know if you have any questions.

Thanks for the help.