React.memo is not working, when only Parent component changes, children component still render

Question

Problem:

Children component is exported with React.memo(), with the intention of not rendering children component when only parent component is updating. However, when parent component updates, the children component also renders ("Children render" is printed in the console).

How do I prevent children component from rendering when parent component is updating?

See code here: I am a codesandbox link

Parent Component

import React, { useState } from "react";
import Children from "./Children";

function Parent() {
  const [name, setName] = useState("");
  const [products, setProducts] = useState([{ name: "", price: "" }]);

  console.log("parent render");
  function handleNameChange(event) {
    setName(event.target.value);
  }

  function handleProductChange(index, product) {
    setProducts((prev) => {
      const newProducts = [...prev];
      newProducts[index] = product;
      return newProducts;
    });
  }

  function addAnotherProduct() {
    setProducts((prev) => {
      const newProducts = prev;
      return [...newProducts, { name: "", price: "" }];
    });
  }

  return (
    <>
      <label>Category:</label>
      <input type="text" value={name} name="name" onChange={handleNameChange} />
      <br />
      {products.map((product, index) => {
        return (
          <Children
            key={index}
            name={product.name}
            price={product.price}
            handleProductChange={(product) =>
              handleProductChange(index, product)
            }
          />
        );
      })}

      <button onClick={addAnotherProduct}>Add another product</button>
    </>
  );
}

export default Parent;

Children Component

import React from "react";

function Children(props) {
  const productName = props.name;
  const productPrice = props.price;

  const handleChange = (name, value) => {
    const newProduct = {
      name: productName,
      price: productPrice,
      [name]: value
    };
    console.log(newProduct);
    props.handleProductChange(newProduct);
  };

  console.log("Children Render");
  return (
    <>
      <div>
        <label>Product Name:</label>
        <input
          type="text"
          value={productName}
          onChange={(event) => handleChange("name", event.target.value)}
        />
        <br />
        <label>Product Price:</label>
        <input
          type="text"
          value={productPrice}
          onChange={(event) => handleChange("price", event.target.value)}
        />
      </div>
    </>
  );
}

export default React.memo(Children);

I tried using React.memo(children) and useCallback() for handleProductChange() inside the parent component. However, both doesn't seem to work.

Answer 1

React.memo shallow compares current and previous props, and if one changes, it re-renders the component. In your case handleProductChange is generated on each parent render, and you also wrap in an arrow function, which generate a new function for each child.

Working example sandbox

Wrap the function in useCallback:

const handleProductChange = useCallback((index, product) => {
  setProducts((prev) => {
    const newProducts = [...prev];
    newProducts[index] = product;
    return newProducts;
  });
}, []);

Avoid generating a new function for each child, and pass the index to the child:

<Children
  key={index}
  index={index}
  name={product.name}
  price={product.price}
  handleProductChange={handleProductChange}
/>

Call the handleProducChange with the index in the child:

const handleChange = (name, value) => {
  const newProduct = {
    name: productName,
    price: productPrice,
    [name]: value
  };
  console.log(newProduct);
  props.handleProductChange(props.index, newProduct);
};