Estoy leyendo muchas publicaciones aquí que recomiendan no usar objetos de estado profundamente anidados en React.
Sin embargo, ¿se aplican estas desventajas al estado de un objeto de un solo nivel? ¿Hay alguna diferencia de rendimiento entre estos dos ejemplos?
¿El primer ejemplo causará tantos renderizados como el segundo? ¿Importa incluso a una escala tan pequeña como esta?
const [example, setExample] = useState({ group1property1: '', group1property2: '', group2property1: '', group2property2: '', }); const [example2, setExample2] = useState({ group1: { property1: '', property2: '', }, group2: { property1: '', property2: '', } });¿Hay alguna diferencia de rendimiento entre estos dos ejemplos?
No. Cuando se reasigna el átomo de estado (y ya debería saber que no debe modificar internamente un átomo de estado de objeto/matriz), el componente se actualiza.
// not good; will not cause update since identity of `example` doesn't change example.group1property1 = 8; setExample(example); // good; example is shallow-copied and updated setExample(example => ({...example, group1property1: 8}));¿El primer ejemplo causará tantos renderizados como el segundo?
Sí, ya que deberá copiar superficialmente el átomo de estado externo para que React detecte los cambios en un objeto interno de todos modos. Es solo que la actualización de un objeto profundo se vuelve un poco tediosa a menos que use algo como immer .
// not good; will not cause update, etc. etc. example.group1.property1 = 8; setExample(example); // good; example is shallow-copied, as is group1 setExample(example => ({...example, group1: {...example.group1, ...property1: 8}}));¿Importa incluso a una escala tan pequeña como esta?
Probablemente no.