React useState no changing value in render

Question

I have a component with customButton for PWA:

const PWA = () => {
  const [supportsPWA, setSupportsPWA] = useState(false)
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  useEffect(() => {
    const handler = e => {
      e.preventDefault()
      setDeferredPrompt(e)
      setSupportsPWA(true)
    }
    window.addEventListener('beforeinstallprompt', handler)

    return () =>
      window.removeEventListener('beforeinstallprompt', handler)
  }, [])

  return (
    <>
      {supportsPWA.toString()}
      {console.log(supportsPWA)}
      {supportsPWA && <div>test</div>}
    </>
  )
}
export default PWA

I have beforeinstallprompt which I change supportsPWA status from false to true. In render I have supportsPWA.toString() it's always false. Console log return me: false and next true, so if supportsPWA is true why React not render div test?

EDIT:

I found where is the problem. I render PWA component in another component: {showMobileMenu && (<PWA />)}. showMobileMenu I changing by button (from false to true ) and here is problem. When I remove showMobileMenu && ... and I have only <PWA /> then div test is rendering correctly. But I dont know how I can resolve it?

https://stackoverflow.com/questions/60540985/react-usestate-doesnt-update-in-window-events — FireFighter, Apr 18 '21 at 19:20
You sure this component is not dismounted and mounted again? How many entries do you have in the console for `{console.log(supportsPWA)}`? Just 2, false and true? Or more? — Nadia Chibrikova, Apr 18 '21 at 19:27
That's weird. I'd add more logs (before add/remove event listener and inside the handler), maybe that can bring some light? — Nadia Chibrikova, Apr 18 '21 at 19:46

Mario Petrovic · Answer 1 · 2021-04-18T22:37:54.803

Well in your case instead of doing {showMobileMenu && (<PWA />)} which dismounts and mounts your component every time just show/hide content in your PWA component, if that is acceptable:

const PWA = ({ showPWAComponent }) => {
  const [supportsPWA, setSupportsPWA] = useState(false)
  const [deferredPrompt, setDeferredPrompt] = useState(null)

  useEffect(() => {
    const handler = e => {
      e.preventDefault()
      setDeferredPrompt(e)
      setSupportsPWA(true)
    }
    window.addEventListener('beforeinstallprompt', handler)

    return () =>
      window.removeEventListener('beforeinstallprompt', handler)
  }, [])

  return showPWAComponent && (
    <div>
      {supportsPWA.toString()}
      {console.log(supportsPWA)}
      {supportsPWA && <div>test</div>}
    </div>
  )
}
export default PWA

And in the other component where you use PWA go:

{<PWA showPWAComponent={showMobileMenu} />)}

In any other case this case that you have will not work exactly because you have that removal of component there.

Np, i edited my answer also, but there is not much to do actually for your case. If this is the answer you were looking for — Mario Petrovic, Apr 19 '21 at 07:59

React useState no changing value in render

1 Answers1