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

Answer 1

  <Items propsname={data} />

Answer 2

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

Answer 3

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>
   );
  };