21 ms·

Question to the folks with a lot of frontend framework experience: Is there a framework/library that supports the usage of an effect-system when it comes to re

Question to the folks with a lot of frontend framework experience: Is there a framework/library that supports the usage of an effect-system when it comes to rendering actions? For instance, in react, a component (or rather it's render-function) has to return the element(s) directly. Is there a framework where the render-function accepts something effect-like or promise-like instead, even if that means that the rendering might potentially be delayed?

n2d4 3y ago
React now supports this using Suspense boundaries [0]. Some frameworks (eg. NextJS) already ship variants of it but here is some code you could use in React's development version: function MyComponent() { const promise = ...; const result = use(promise); // use is like await // do something } function Wrapper() { return ( <Suspense fallback={<Loading />}> <MyComponent /> </Suspense> ); } You don't need to know this to use it, but the implementation is both interesting and horrifying: The `use` hook checks if the Promise has resolved, and if not, it throws an error that is caught by the Suspense boundary. And because there is no property like `hasResolved` on JS promises, `use` adds one itself. (At least this was how an early draft proposed it, a lot of changes have been done since, and my knowledge might be out of date.) [0] https://react.dev/reference/react/Suspense https://react.dev/reference/react/Suspense
- valenterry 3y ago
  Thank you, this is exactly what I meant! Awesome that this is already being worked on in react. Yeah, the implementation under the hood seems a bit crazy. Reminds me of how I found out that angular used to call toString on functions to get the parameter names for dependency injection. But honestly, if I can use it without problems as a user, that's what I care most, even if the backend developer in me is horrified about it, haha. But I guess that is mostly Javascripts fault after all.
- eyelidlessness 3y ago
  The way Suspense works is actually even a bit more interesting/horrifying: it doesn’t throw an error, it throws a Promise. Which again you don’t need to know to use it, and so it’s a valid implementation detail, but it’s a really odd one.
  - SebastianKra 3y ago
    To be fair, in js, throwing is the only way a function (aka Hook) can abort the execution of its calling function (aka Component). The decision to avoid a custom compiler is responsible for almost all oddities and downsides of React.
- theteapot 3y ago
  Is a thing in Vue3 also -- https://vuejs.org/guide/built-ins/suspense.html https://vuejs.org/guide/built-ins/suspense.html
marcelr 3y ago
If you mean effects as data, I can't think of anything off top other than elm which is a language + framework. I've made my own though: https://github.com/marcellerusu/capable-js https://github.com/marcellerusu/capable-js. Its not for use but it was an interesting experience that enables a lot of new patterns by using generators. I don't claim that it is better than other frameworks though, there's a lot of times where this pattern is significantly more cumbersome than just using react.
- valenterry 3y ago
  Very cool! Especially I liked your example of elements that have "finished". Funnily, this was one of the major problems of mine when I built [visakami](www.visakami.com) which essentially is just a survey on steroids. I think you should join the react developer's team. ;-)
tipiirai 3y ago
> Question to the folks with a lot of frontend framework experience: I think this should be "...with a lot of React experience".

n2d4 3y ago

React now supports this using Suspense boundaries [0]. Some frameworks (eg. NextJS) already ship variants of it but here is some code you could use in React's development version: function MyComponent() { const promise = ...; const result = use(promise); // use is like await // do something } function Wrapper() { return ( <Suspense fallback={<Loading />}> <MyComponent /> </Suspense> ); } You don't need to know this to use it, but the implementation is both interesting and horrifying: The `use` hook checks if the Promise has resolved, and if not, it throws an error that is caught by the Suspense boundary. And because there is no property like `hasResolved` on JS promises, `use` adds one itself. (At least this was how an early draft proposed it, a lot of changes have been done since, and my knowledge might be out of date.) [0] https://react.dev/reference/react/Suspense https://react.dev/reference/react/Suspense

valenterry 3y ago
Thank you, this is exactly what I meant! Awesome that this is already being worked on in react. Yeah, the implementation under the hood seems a bit crazy. Reminds me of how I found out that angular used to call toString on functions to get the parameter names for dependency injection. But honestly, if I can use it without problems as a user, that's what I care most, even if the backend developer in me is horrified about it, haha. But I guess that is mostly Javascripts fault after all.
eyelidlessness 3y ago
The way Suspense works is actually even a bit more interesting/horrifying: it doesn’t throw an error, it throws a Promise. Which again you don’t need to know to use it, and so it’s a valid implementation detail, but it’s a really odd one.
- SebastianKra 3y ago
  To be fair, in js, throwing is the only way a function (aka Hook) can abort the execution of its calling function (aka Component). The decision to avoid a custom compiler is responsible for almost all oddities and downsides of React.
theteapot 3y ago
Is a thing in Vue3 also -- https://vuejs.org/guide/built-ins/suspense.html https://vuejs.org/guide/built-ins/suspense.html

marcelr 3y ago

If you mean effects as data, I can't think of anything off top other than elm which is a language + framework. I've made my own though: https://github.com/marcellerusu/capable-js https://github.com/marcellerusu/capable-js. Its not for use but it was an interesting experience that enables a lot of new patterns by using generators. I don't claim that it is better than other frameworks though, there's a lot of times where this pattern is significantly more cumbersome than just using react.

valenterry 3y ago
Very cool! Especially I liked your example of elements that have "finished". Funnily, this was one of the major problems of mine when I built [visakami](www.visakami.com) which essentially is just a survey on steroids. I think you should join the react developer's team. ;-)

tipiirai 3y ago

> Question to the folks with a lot of frontend framework experience: I think this should be "...with a lot of React experience".