CODEWITHSUNDEEP
javascriptreactjs
VjyV
VjyV

Reputation: 334

In React Js, I want to render component only if props updated

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.

Upvotes: 1

Views: 69

Answers (1)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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}/>

Upvotes: 2

Related Questions