1

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}> Increment 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.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
VjyV
  • 344
  • 2
  • 13

1 Answers1

2

It is because addItem has a method type prop so you need to create a useCallback() for that method which you have passed as a prop in addItem. This will work for you:


const onAddItem = useCallback((val) => {
  setItemList(prev => [...prev,val]);
}, [itemList]);

<ListItem itemList={itemList} addItem={onAddItem}/>
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • Thanks, @ankit for your answer. but could you please tell why it's rendering component two time when adding item. – VjyV Aug 15 '22 at 11:22
  • itemList dep is redundant... @VjyV on your question: https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode btw your ListItem currently holds logic which would be much cleaner if you extract it on a parent level. i.e. when you click the "Add" button just invoke .props.onAdd and implement your onAdd logic in the parent. – idmitrov Aug 24 '22 at 21:32