React.useMemo está volviendo a renderizar todos los elementos del arreglo.

Tengo un componente de React que almacena un conjunto de frutas en useState. Tengo una función memorizada (visibleFruits) que filtra las frutas. Mapeo visibleFruits al DOM.

El problema es que cuando marco una fruta, todas las frutas visibles se vuelven a renderizar.

Esperaba que solo se volviera a renderizar la seleccionada, ya que es la única que está cambiando.

¿Existe alguna forma de utilizar este patrón pero evitar que todo se vuelva a renderizar al marcar?

En la vida real, hay una función compleja en useMemo de visibleFruits. Por lo tanto, no puedo simplemente agregar el filtro antes del mapeo.

Edit, aquí está la edición actualizada:

“`import React from ‘react’

const Example = () => {
const [fruits, setFruits] = React.useState([
{ id: 1, name: 'apple', visible: true, selected: false },
{ id: 2, name: 'banana', visible: false, selected: false },
{ id: 3, name: 'orange', visible: true, selected: false }
])

const visibleFruits = React.useMemo(() => {
return fruits.filter((f) => f.visible)
}, [fruits])

const handleCheck = (bool, id) => {
setFruits((prev) => {
return prev.map((f) => {
if (f.id === id) {
f.selected = bool
}
return f
})
})
}

return (
<div>
{visibleFruits.map((fruit) => {
return <fruitoption fruit="{fruit}" handlecheck="{handleCheck}"></fruitoption>
})}
</div>
)
}

const FruitOption = ({ fruit, handleCheck }) => {
console.log('<em>* THIS RENDERS TWICE EVERY TIME USER SELECTS A FRUIT *</em>')
return (
<div key="{fruit.id}">
<input checked="{fruit.selected}" onchange="{(e)" ==""> handleCheck(e.target.checked, fruit.id)}
type='checkbox'
/>
<label>{fruit.name}</label>
</div>
)
}

export default Example
“`