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