He realizado un cambio en la devolución de llamada onChange para usar el estado en lugar del evento de cambio de React. ¿Se recomienda este cambio y está en línea con las convenciones o es mejor usar el evento de React en su lugar?
const Toggle: React.FC = () => { const { on, setOn } = useContext(AppContext); const isOn: boolean = on.key === 'on'; const handleToggle = (checked: boolean) => { const key: string = checked ? 'on' : 'off'; setOn(key); }; return ( <Toggle name="toggle" type="checkbox" checked={isOn} onChange={(e: any) => handleToggle(e.target.checked)} // before onChange={() => handleToggle(!isOn)} // after /> ); };Idealmente, no usaría ninguno, asumiendo que on y setOn son el resultado de un gancho React.useState() que admite actualizaciones funcionales . En su lugar, algo como esto:
onChange={() => setOn(oldValue => oldValue ? 'off' : 'on')} El uso del comportamiento de actualización funcional evita cualquier tipo de posible condición de carrera; por ejemplo, ¿qué sucede si, por alguna coincidencia improbable, el usuario hace clic en el interruptor dos veces rápidamente antes de que React tenga la oportunidad de procesar las actualizaciones de estado y volver a procesar? El resultado de dos (o más) clics rápidos posiblemente podría generar un comportamiento inadecuado: React usaría el mismo valor para actualizar el estado varias veces seguidas, lo que esencialmente haría que varios clics se comportaran como uno solo (activando la entrada pero no off on ) en su lugar de on y off correctamente la entrada on etc.
Las actualizaciones funcionales ponen en cola las actualizaciones para que se procesen en orden, de tal manera que se garantiza que cada actualización tenga acceso al verdadero estado actualizado que resultó de la actualización anterior . Entonces, incluso si el usuario hizo clic en la entrada alternar dos, tres veces, una docena de veces en un microsegundo, el estado final de la entrada será el esperado.
Editar: este ejemplo que armé demuestra por qué esto es importante y el impacto que tiene. Mire de cerca los controladores onClick de los botones del contador y observe cómo coinciden con los tres enfoques posibles que hemos identificado. Cuando hace clic en el botón "Activar tres clics rápidos en todos los botones de contador a continuación", hace exactamente eso. Pero observe cómo solo el enfoque de actualización funcional brinda el estado final adecuado para esta situación: se incrementa en +3, porque se hizo clic tres veces, mientras que los otros dos contadores solo se incrementan en +1.