3 ms·
"things like modals, toasts, or things that just don't fit into a neat little area of the screen in a sibling child parent relationship" That's actually where
by shados 10y ago
"things like modals, toasts, or things that just don't fit into a neat little area of the screen in a sibling child parent relationship"
That's actually where React is very strong compared to other functional-style UI frameworks (eg: Elm's). Portals in React are really elegant and makes dealing with modals and toasts (or anything that doesn't fit in this model) quite nice.
I was working today with someone who was making a browser extension to inject stuff in host pages (think something like LastPass or those rulers for designers).
We made a set of components that create arbitrary elements at arbitrary locations, or highjack existing ones, and from there you get to manipulate things like you would any other functional-style UI. It's quite lovely (all thanks to the lifecycle hooks and React's ability to render subtrees anywhere on the screen). Very few tools do it as well as React does, otherwise I'd be writing Elm all day instead of JavaScript.
- mevile 10y agoYou're achieving that with separate calls to render. In an ideal React application you only have a single render call. So no, you're not demonstrating a good use of React and you're certainly not showing this to be a strength in React. Imagine, you wouldn't call react.render from inside an existing React component. That's ridiculous.
- shados 10y agoReact's escape hatches ARE its strength. If you don't need them, you can just use any ol vanilla virtual dom library. The entire reason for React's existance is to slap escape hatches on top of a vdom so you can work functionally in a non-functional environment.