App.jsx

// App.js
import { Provider } from "jotai";

import { Layout } from "./Layout";

const App = ({ children }) => {
  return (
    <Provider>
      <Layout>
        {children}
      </Layout>
    </Provider>
  );
};

export default App;

atoms.js

// atoms.js
import { atom } from "jotai";

export const themeAtom = atom({ theme: "dark", fontSize: "big" });

Form.jsx

export const Form = ({ ...props }) => {
  const name = useState(null);
  const address = useState(null);
  const other = useState(null);
  
  const fields = [name, address, other];

  return (
    <form>
      {fields.map(([field, setField], index) => (
        <input type="text" onChange={e => setField(e.value)} value={field} />
      )}
    </form>
  );
};

Layout.jsx

// Layout.js
import { useAtom } from "jotai";

import { themeAtom } from "./atoms";

export const Layout = ({ children, ...props }) => {
  const [{ theme, fontSize }, setTheme] = useAtom(themeAtom);
  
  return (
    <main className={`myapp__theme--${theme}`}>
      <header className={`myapp__theme__fontsize--${fontSize}`}>
        <h1>My app!</h1>
        <button onClick={() => setTheme(t => ({ ...t, theme: t.theme === "dark" ? "light" : "dark" }))}>Toggle theme</button>
      </header>
      {children}
    </main>
  );
};