Si tengo que manejar 3 variables con useState en reaccionar, estoy haciendo esto:
const [ user , setUser ] = useState({ name : '', phone : '', age : '' }) setUser({...user, phone: value})O esto :
const [ phone , setPhone] = useState('') const [ name , setPName] = useState('') const [ age , setAge] = useState('') setPhone(value)¿Hay alguna diferencia en términos de rendimiento? ¿Qué enfoque es más apropiado?
Depende de cómo los uses. Si lo usa en un formulario, puede ser más conveniente tenerlos en un solo objeto. Técnicamente, reaccionar tiene un sistema de observación que solo actualizará lo que debe actualizarse y, por lo tanto, no volverá a mostrar lo que no ha cambiado. Aquí hay un enlace a la documentación oficial que puede ayudarlo a comprender cuándo usar elementos basados en objetos versus elementos de estado único.
para administrar objetos complejos y anidados y también si tiene muchos estados, es mejor usar useReducer así:
import { useReducer } from 'react'; const initialState = { name: '', phone: '', age: 0 }; const reducer = (state, action) => { switch (action.type) { case 'name': return { ...state, name: action.payload }; case 'phone': return { ...state, phone: action.payload }; case 'age': return { ...state, age: action.payload }; default: return state; } }; const LoginPage = () => { const [state, dispatch] = useReducer(reducer, initialState); const onChangeNameHandler = (e) => { dispatch({type: 'name', payload: e.target.value}) } return ( <input value={state.name} onChange = {onChangeNameHandler} /> ) }Y luego tienes todos los estados en "estado" que definimos al principio, por ejemplo:
console.log(state.name) // nameLe sugiero que lea este artículo que compara useReducer y useState aquí .