Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
@AlexDeLarge it looks more like a bug in React itself, related to portals. I "fixed" this by moving some portals around. I still need to better isolate this to be sure, try to create a minimal example that produces this and report it.
-
@AlexDeLarge I never had any problem with them before either.
Out of curiosity, where in your components do you usually place portals? (Anywhere, as the first/last child, depends?)
I usually place them as the last child, like this:
<Foo>
<Bar />
<ModalPortal>
<Modal />
</ModalPortal>
</Foo>
But in this case the portal was somewhere inside, with other siblings before and after it, and the affect element was the first dom element rendered by the component right after the portal. That element was being swapped with the div that was rendered in the portal.
I moved the portal to be the last child and it worked. -
@AlexDeLarge nice. I've done a similar ModalButton component. I used it in a table in an admin application, each row printing one ModalButton.
-
@AlexDeLarge do you do server-side rendering? If you do, how do you handle portals on the server?
I found that this only happens when rendering on the server.
Related Rants
This had to be posted!
Nowadays......¯\_(ツ)_/¯
Bug I had to fix today: some elements in our React app were being swapped with other elements.
We had `<foo>bar</foo>` on the component but on the html `foo` was being swapped with some other element in our app. It's contents ("bar" in the example) were being left in place, though, so we were getting `<baz>bar</baz>`.
This would only happen when running on production mode. On development everything was fine.
Also, everything seemed fine on the React dev tools. `foo` was where it was supposed to be, but on the html it was somewhere else.
Weirdest shit I ever saw when using React. I found a way to go around it and applied that fix, but I'm still trying to track this down to the source.
The worst part was waiting for fucking webpack to finish the production bundle on every fucking change I wanted to test. I didn't miss the change-save-compile-test flow at all.
What a shit day.
rant
waiting for compiler
react
weird bug