React functional component child won't re-render when props change

Question

I'm passing an array of objects to a child as props, and I wanted the child component to re-render when the aray changes, but it doesn't:

parent:

export default function App() {
  const [items, setItems] = useState([]);

  const buttonCallback = () => {
    setItems([...items, { text: "new item" }]);
  };
  return (
    <div className="App">
      <h1>Items list should update when I add item</h1>
      <button onClick={buttonCallback}>Add Item</button>
      <Items />
    </div>
  );
}

child:

const Items = ({ itemlist = [] }) => {
  useEffect(() => {
    console.log("Items changed!"); // This gets called, so the props is changing
  }, [itemlist]);
  return (
    <div className="items-column">
      {itemlist?.length
        ? itemlist.map((item, i) => <Item key={i} text={item.text + i} />)
        : "No items"}
      <br />
      {`Itemlist size: ${itemlist.length}`}
    </div>
  );
};

I found this question with the same issue, but it's for class components, so the solution doesn't apply to my case.

Sandbox demo

@Villa7_ Thanks! I made this demo quickly (based on my actual code), but with your suggestion the demo works, so I guess it's just a bug on my code, thanks! — Bersan, Aug 27 '22 at 19:58

score 3 · Answer 1 · answered Aug 27 '22 at 20:36

3

  <Items propsname={data} />

answered Aug 27 '22 at 20:36

serkan06

31
3

score 1 · Answer 2 · answered Aug 27 '22 at 20:40

const buttonCallback = () => {
    setItems([...items, { text: "new item" }]);
  };

but you should put it as:

const buttonCallback = () => {
    setItems([...items, { text: "new item", id: Date.now() }]);
  };

Because is not recommended to use index as a key for react children. Instead, you can use the actual date with that function. That is the key for React to know the children has changed.

itemlist.map((item) => <Item key={item.id} text={item.text} />)

score 1 · Answer 3 · answered Aug 27 '22 at 20:44

1

Try below: you are adding array as a dependency, to recognise change in variable, you should do deep copy or any other thing which will tell that useEffect obj is really different. `

 const Items = ({ itemlist = [] }) => {
  const [someState,someState]=useState(itemlist);
  useEffect(() => {
    someState(itemlist)
  }, [JSON.stringify(itemlist)]);
  return (
    <div className="items-column">
     {someState?.length
      ? someState.map((item, i) => <Item key={i} text={item.text 
       + i}  
           
    />)
    : "No items"}
    <br />
     {`Itemlist size: ${someState.length}`}
   </div>
   );
  };

answered Aug 27 '22 at 20:44

Pradnya Kulkarni

116
7

This is a bad approach, you're suggesting that react cannot recognize when an array changes, and it does. You don't need to use stringify over arrays. – Diego Andrés Aug 27 '22 at 22:53
even if you send same value of itemlist, that useEffect will get triggered.I am not saying take same approach but do something in useEffect which will understand new array values arrived. – Pradnya Kulkarni Aug 28 '22 at 11:45

React functional component child won't re-render when props change

3 Answers3