Hacker News Reader

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 = https://effect.website/docs/v4/api/atom-react/ScopedAtom)

View on HN

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>"