const [isToSave, setisToSave] = React.useState(false) const myStateRef = React.useRef(isToSave); React.useEffect(() => { window.addEventListener('set-is-to-save', () => { setisToSave(!myStateRef.current) }, false); return () => { window.removeEventListener('set-is-to-save', () => { setisToSave(!myStateRef.current) }); } }, []) function handleOnClick(e: React.MouseEvent<HTMLDivElement>): void { myStateRef.current=!isToSave setisToSave(myStateRef.current) } La función handleOnClick es llamada por onClick para uno de los componentes y parece estar funcionando bien. Pero, cada vez que trato de cambiar el estado de los componentes independientes mediante activadores de eventos, el estado de isToSave no cambia.
Para este caso de uso simple, no tiene que mantener el estado usando useRef :
Puede ver mi prueba rápida en mi código que activa un evento personalizado aquí:
https://codesandbox.io/s/brave-https-4q6wd?file=/src/App.js
Básicamente, si usa la actualización de estado con devolución de llamada, debería funcionar:
window.addEventListener('set-is-to-save', () => { setisToSave((val) => !val) }, false);PD: Tenga cuidado con los eventos personalizados y la seguridad. Si la comunicación está dentro de la misma aplicación, debe usar contexto u otra administración de estado.