Popup using useState stopped working in React 18

Question

I made a popup using useState which worked in React 17 but stopped in React 18 without any errors being displayed.

When I set the isVisible state to be true initially the Popup gets displayed but setting it to using the button does not work.

I'm wondering why this is the case and how I can migrate it to React 18 since I need it for other dependencies in my project.

{isVisible && (
  <Popup
    visible={isVisible}
    toggle={() => {
      setLightboxVisible(false);
      document.body.classList.toggle("body-noscroll-class");
    }}
  >
    Lorem Ipsum dolor sit amet.
  </Popup>
)}

<button 
  onClick={() => {
    setLightboxVisible(true);
  }}>
Show Popup
</button>

Here is a Codesandbox which shows the behavior.

Inside `Popup` the `useOuterClick` it's firing to early, on the first render it's just called and hides the popup. Take a look into defined hook and how you can avoid this call on first render. — Miłosz, Jun 03 '22 at 07:15
@Miłosz Ohh I see, that makes sense but why did it work in React 17? — Alexander Hörl, Jun 03 '22 at 07:16
Honestly I have no idea, looking on this still and I can't find the solution for now. At least we know it's this — Miłosz, Jun 03 '22 at 07:19
Alexander, I've changed the event from `click` to `mousedown` and it works. — Miłosz, Jun 03 '22 at 07:27
@Miłosz that is very strange, the problem with `mousedown` is that it only stays visible for as long as the mouse is down and as soon as I release it, it disappears again. — Alexander Hörl, Jun 03 '22 at 07:32
Not in the button handler but in the hook: https://codesandbox.io/s/relaxed-cdn-vjih7v?file=/src/hooks.js — Miłosz, Jun 03 '22 at 07:34
@AlexanderHörl, if I may, I would say that for a popup your code is much complexe. There is a raison it should be this way? — Youssouf Oumar, Jun 03 '22 at 07:42
@yousoumar Yeah I've also thought that its quite complex, do you have a better solution tho? — Alexander Hörl, Jun 03 '22 at 07:45

score 2 · Answer 1 · answered Jun 03 '22 at 08:05

2

You shouldn't use css display to show or hide elements in react. Just use react code to either render it to the DOM or don't render it to the DOM. You were already doing this in app.js, and then in your popup you were doing it again. So in the css you didn't need the display property. See simplified version in the new codesandbox.

Use useEffect to listen for changes to isVisible to determine when to toggle the css class on the body.

Add an onClick to the modal backdrop, but then on the inner div prevent the click event from bubbling up to the parent by using e.stopPropagation.

See these changes in the updated CodeSandbox.

answered Jun 03 '22 at 08:05

Anthony Tietjen

1,032
2
8
19

Really good point you're making here. It's always nice to see it not mixing React and vanilla. Did you consider portal to achieve modal which is detached from the nested html? – Miłosz Jun 03 '22 at 08:29
The problem here is that by default the `body-noscroll-class` is activated. – Alexander Hörl Jun 03 '22 at 10:36

score 0 · Accepted Answer · answered Jun 10 '22 at 08:01

0

Fixed by changing click to mousedown in the useOuterClick hook, as suggested by @Miłosz

https://codesandbox.io/s/relaxed-cdn-vjih7v?file=/src/hooks.js

answered Jun 10 '22 at 08:01

Alexander Hörl

578
4
11
24

Popup using useState stopped working in React 18

2 Answers2

Linked