Thread

1. exceptione · 1790969139 · focus · HN ↗

   Can someone explain why this is a good idea? There is a ton of magic here, since the value string is not even part of the UserName function signature. Dependency injection is not about hiding your dependencies. On a first look, this seems to be really bad, but I might be totally misunderstanding this library.

       import { make, useAtomValue } from "@effect/atom-react"
       import { Atom } from "effect/reactivity"
       import * as React from "react"
       import { renderToStaticMarkup } from "react-dom/server"
   
       const User = make((name: string) => Atom.make(name))
   
       function UserName() {
           const atom = User.use()
           const value = useAtomValue(atom)
           return React.createElement("span", null, value)
       }
   
       export function App() {
       return React.createElement(
           User.Provider,
           { value: "Ada" },
           React.createElement(UserName)
           )
       }
   
       renderToStaticMarkup(React.createElement(App)) // => "<span>Ada</span>"
   

   (src = <a href="https:&#x2F;&#x2F;effect.website&#x2F;docs&#x2F;v4&#x2F;api&#x2F;atom-react&#x2F;ScopedAtom" rel="nofollow">https:&#x2F;&#x2F;effect.website&#x2F;docs&#x2F;v4&#x2F;api&#x2F;atom-react&#x2F;ScopedAtom)

   1. itishappy · 1790990788 · focus · HN ↗

      The atom-react module is for interacting with React, and ScopedAtom is for scoping those interactions to specific subtrees, so the entire purpose of this particular example is to avoid passing state through many nested functions. Here&#x27;s the equivalent React code without Effect:

          import { createContext, useContext, useState } from "react";
          import { renderToStaticMarkup } from "react-dom/server";
      
          const UserContext = createContext(null);
      
          function UserProvider({ value, children }) {
            const [name] = useState(value);
            return <UserContext.Provider value={name}>{children}</UserContext.Provider>;
          }
      
          function UserName() {
            return <span>{useContext(UserContext)}</span>;
          }
      
          function App() {
            return (
              <UserProvider value="Ada">
                <UserName />
              </UserProvider>
            );
          }
      
          renderToStaticMarkup(<App />); // => "<span>Ada</span>"

      1. exceptione · 1791013559 · focus · HN ↗

         Ah thx, this is a rewrite of React&#x27;s Context. `userName` would have been so much better than `value`. I had to keep the possibility in mind that `value` is a kind of implicit magic variable in atoms.

         Not sure what benefit this atom stuff brings. In react I can see that `value` is an argument, which from an fp point of view is a clear pro.

Unofficial Hacker News client; not affiliated with Y Combinator.