Si tuviera un componente funcional que requiriera el uso y la manipulación de varios elementos de estado, y tuviera varios estados para diferentes cosas que no están directamente relacionadas (como las estadísticas del juego y los estados de los elementos de la interfaz de usuario), ¿sería mejor el rendimiento (o la práctica)? Hazlo asi:
const [state, setState] = React.useState({ username: 'JoeSchmoe200', points: 200, isHoveringOverItem: {item1: false, item2: false, item3: false}, selectedItem: {item1: true, item2: false, item3: false} })(donde todo lo que se mantiene en estado está en un objeto y se establece con un método), o así:
const [username, setUsername] = React.useState('JoeSchmoe200') const [points, setPoints] = React.useState(200) const [isHoveringOverItem, setIsHoveringOverItem] = React.useState( {item1: false, item2: false, item3: false} ) const [selectedItem, setSelectedItem] = React.useState( {item1: true, item2: false, item3: false} )donde cada estado se declara individualmente y se establece individualmente. Solo estoy tratando de iniciar una conversación aquí para obtener más información sobre React.
¿Qué opinas de este rendimiento en cuanto a rendimiento? ¿En términos de legibilidad? ¿Es una cuestión de preferencia o existe una mejor práctica objetiva?
Antes de React 18, se recomendaba agrupar las variables de estado que se esperaba que cambiaran juntas. React solía realizar actualizaciones de estado por lotes, pero solo aquellas directamente dentro de los eventos de React como onClick , onChange , etc. y métodos de ciclo de vida como useEffect . Múltiples actualizaciones de estado dentro de los métodos asíncronos, por ejemplo, fetch() no se procesaron por lotes.
Sin embargo, con React 18, todas las actualizaciones de estado que ocurren juntas se agrupan automáticamente en un solo renderizado. Esto significa que está bien dividir el estado en tantas variables separadas como desee.
Fuente: https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-automatic-batching
Aún así, es una buena práctica en mi opinión mantener las piezas relacionadas juntas para una mejor legibilidad del código. Pero los objetos de estado deben mantenerse en un tamaño manejable; de lo contrario, se debe usar useReducer() .
Con React 18, las actualizaciones de estado se procesan automáticamente por lotes, por lo que no es necesario mezclar todo en un solo objeto de estado. Lea la sección sobre procesamiento por lotes automático aquí. Sabiendo eso, aquí hay algunos consejos que obtuve de este artículo