entonces, en los ganchos de reacción, podemos tener múltiples estados en nuestro componente:
const [stateA, setStateA] = useState(0); const [stateB, setStateB] = useState('Hello World'); const [stateC, setStateC] = useState(true);pero hay un caso en el que necesitamos actualizar varios estados a la vez. digamos al hacer clic en el evento:
const handleClick = () => { setStateA(prev => prev+1); setStateB('John Doe'); setStateC(false); }Como podemos ver, necesito actualizar estos estados 1 por 1. Entonces, para actualizar todos los estados a la vez y garantizar todas las actualizaciones en el mismo lote, intenté hacer este reductor:
const stateReducer => (prev, next) { switch (typeof next) { case 'object': return { ...prev, ...next }; case 'function': return { ...prev, ...next(prev) }; default: return prev; } ... const [state, setState] = useReducer(stateReducer, { stateA: 0, stateB: 'Hello World', stateC: true }); ... // just set single state setState({stateA: 0}); // set multiple state setState({ stateA: 5, stateB: 'John Doe' }); // set multiple state with prev state setState(prev => ({ stateA: prev.stateA +1, stateB: 'John Doe', stateC: !prev.stateC, }));¡Funciona! pero ¿cómo va a afectar el rendimiento? o esto está bien?
Su rendimiento no se verá afectado.
En la sección de notas de la página Actualizaciones funcionales en la referencia de ganchos de reacción , publican useReducer como una alternativa para useState cuando necesitamos administrar diferentes variables de estado.
Otra opción es useReducer, que es más adecuada para administrar objetos de estado que contienen múltiples subvalores.
La clave de rendimiento no reside en el uso de useState o useReducer en sí, se trata más de por qué necesita usarlo y, como dicen en la documentación de useReducer , está haciendo un buen uso simplificando la forma en que maneja este 3 estado variables
useReducer suele ser preferible a useState cuando tiene una lógica de estado compleja que involucra múltiples subvalores o cuando el siguiente estado depende del anterior.
No estoy 100% seguro de esto, pero creo que useState usa useReducer internamente.