Entire list re-rendering when changing a single item - reactjs

Question

I have a list of products and I want to add a few more data like price and quantity. The problem is I lose input focus when I start typing because the entire list is being re-rendered. I have a simple Fiddle replicating that piece of code:
const App = () => {
// List of products
const [products, setProducts] = React.useState([
{
title: 'My Product',
},
{
title: 'My Product 2',
}
]);
// Simple debug to track changes
React.useEffect(() => {
console.log('PRODUCTS', products);
}, [products]);
const ProductForm = ({ data, index }) => {
const handleProductChange = (name, value) => {
const allProducts = [...products];
const selectedProduct = {...allProducts[index]};
allProducts[index] = {
...selectedProduct,
[name]: value
};
setProducts([ ...allProducts ]);
}
return (
<li>
<h2>{data.title}</h2>
<label>Price:</label>
<input type="text" value={products[index].price} onChange={(e) => handleProductChange('price', e.target.value)} />
</li>
);
}
return <ul>{products.map((item, index) => <ProductForm key={item.title} index={index} data={item} />)}</ul>;
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
https://jsfiddle.net/lucasbittar/zh1d6y37/23/
I've tried a bunch of solution I found here but none of them really represents what I have.
Thanks!

Answer 1

Issue
You've defined ProductForm internally to App so it is recreated each render cycle, i.e. it's a completely new component each render.
Solution
Move ProductForm to be externally defined. This now has issue where the handleProductChange doesn't have access to App's functional scope products state. The solution here is to move handleProductChange back into App and update the function signature to consume the index. Use data.price as the input value, you can provide a fallback value or provide initial state for this property.
Suggestion: Name the input name="price" and simply consume it from the event object.
const ProductForm = ({ data, index, handleProductChange }) => {
return (
<li>
<h2>{data.title}</h2>
<label>Price:</label>
<input
name="price" // <-- name input field
type="text"
value={data.price || ''} // <-- use data.price or fallback value
onChange={(e) => handleProductChange(e, index)} // <-- pass event and index
/>
</li>
);
}
const App = () => {
// List of products
const [products, setProducts] = React.useState([
{
title: 'My Product',
},
{
title: 'My Product 2',
}
]);
// Simple debug to track changes
React.useEffect(() => {
console.log('PRODUCTS', products);
}, [products]);
// Update signature to also take index
const handleProductChange = (e, index) => {
const { name, value } = e.target; // <-- destructure name and value
const allProducts = [...products];
const selectedProduct = {...allProducts[index]};
allProducts[index] = {
...selectedProduct,
[name]: value
};
setProducts([ ...allProducts ]);
}
return (
<ul>
{products.map((item, index) => (
<ProductForm
key={item.title}
index={index}
data={item}
handleProductChange={handleProductChange} // <-- pass callback handler
/>)
)}
</ul>
);
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
Working jsfiddle demo

Answer 2

One way to solve the issue would be to have a separate component for <ProductForm /> and pass the required props there.
const ProductForm = ({ data, index, products, setProducts }) => {
const handleProductChange = (name, value) => {
const allProducts = [...products];
const selectedProduct = {...allProducts[index]};
allProducts[index] = {
...selectedProduct,
[name]: value
};
setProducts([ ...allProducts ]);
}
return (
<li>
<h2>{data.title}</h2>
<label>Price:</label>
<input
type="text"
value={products[index].price || ''}
onChange={(e) => handleProductChange('price', e.target.value)}
/>
</li>
);
}
const App = () => {
const [products, setProducts] = React.useState([{title: 'My Product'},{title: 'My Product 2'}]);
return (
<ul>
{products.map((item, index) =>
<ProductForm
key={item.title}
index={index}
data={item}
products={products}
setProducts={setProducts}
/>
)}
</ul>
)
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
Here is the working JSFiddle code link