DEV Community: roggc

How to Fetch data in Dinou with react-enhanced-suspense and Server Functions that return Client Components

roggc — Fri, 07 Nov 2025 20:26:33 +0000

Dinou is a React 19 framework. react-enhanced-suspense is a React package that adds extra properties to React's Suspense.

First thing we need to do is to create a React 19 app by using the command npx create-dinou@latest dinou-app. This will create an app for us ready to be developed in Dinou.

Alternatively, you can create the app yourself from scratch:

Create a folder and run the command npm init -y.
Install dependencies: npm i react react-dom dinou react-enhanced-suspense.
Create a folder src with a page.jsx file in it.

"use client";

export default function Page(){
  return <div>Hi world!</div>
}

Run the project with the command npx dinou dev and go to localhost:3000 in your browser.

In Dinou, Server Functions can return React Client Components. So next thing to do is to create a Server Function that fetches some data and returns a Client Component.

But before that we will create a tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowJs": true,
    "noEmit": true
  },
  "include": ["src"]
}

Now we can import files in Dinou using the alias @/.

Under src/server-functions folder create the Server Function:

"use server";

import Users from "@/components/users";

export async function users(){
  const data = await new Promise((resolve)=>setTimeout(()=>resolve(["John", "Alex"]), 200));

  return <Users users={data} />
}

Now we have to create the Client Component Users we are returning from the Server Function we've just created.

"use client";

export default function Users({users}){
  return users.map(user => <div key={user}>{user}</div>);
}

Finally, we need to call the Server Function from our component Page with Suspense from react-enhanced-suspense.

"use client";

import Suspense from "react-enhanced-suspense";
import {users} from "@/server-functions/users";

export default function Page(){
  return <div>
    <Suspense resourceId="users">{()=>users()}</Suspense>
  </div>
}

And that's it, it will render the React Client Component Users after fetching the data in the Server.

dinou: a minimal React 19 framework

roggc — Fri, 04 Jul 2025 13:54:57 +0000

dinou is a minimal React 19 framework. It has file-based routing, SSR, SSG, ISR, … With dinou you can fetch data with Suspense and Server Functions. Or fetch it in the server without Suspense accompanied of SSG.

You can check all of its capabilities at dinou.dev (made with dinou).

You can also eject dinou into your root directory to have full control and customization capabilities.

Take a look to dinou!!!

KendoReact Challenge Submission: A Waku Project

roggc — Fri, 21 Mar 2025 20:33:38 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I have built an app to search for crypto coins, see a list of crypto coins, and see a chart for the selected crypto coin. It's responsive.

Demo

The link to the app is https://kendoreact-challenge.vercel.app/.

The link to the code repository is this.

The app is a Waku project. Waku is a framework to use React 19 made by the author of Jotai. This means that Server Actions and Server Components can be used. Specifically the approach explained in this post has been followed.

KendoReact Experience

The one thing I have to say is with respect to component Fade (animation). It generates a child component under the hood. So if you plan to have height 100% you need to create a css file defining class k-child-animation-container.

In general, all components were easy to use and documentation was well explained.

React 19, Waku, react-enhanced-suspense and Server Actions: how to fetch data efficiently in the Client

roggc — Fri, 14 Mar 2025 05:56:24 +0000

If we want to use React 19, one of the best options is to use Waku. It's a minimal React 19 framework made by the author of Jotai.

React 19 leverages the power of Server Components and Server Actions. So this post it's about how to fetch data from the server through Server Actions once we are on the Client side.

Let's say we have a page like this in Waku:

//src/pages/index.tsx
import HomePageClient from "../components/home-page-client";

export default async function HomePageServer() {
  return <HomePageClient />;
}

As you can see HomePageServer is a React Server Component. We are calling HomePageClient, which will be a React Client Component:

//src/components/home-page-client.tsx
"use client";

import { sayHello } from "../server-actions/say-hello";
import { Suspense, useEffect, useState } from "react";

export default function HomePageClient() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return isClient ? (
    <Suspense fallback="Loading...">{sayHello()}</Suspense>
  ) : null;
}

In this component we are calling directly a Server Action wrapped in a Suspense component. This server action will return a component (Client or not). Like this:

//src/server-actions/say-hello.tsx
"use server";

import SayHello from "../components/say-hello";

export function sayHello() {
  const promise = new Promise<string[]>((r) =>
    setTimeout(() => r(["Roger", "Alex"]), 1000)
  );

  return <SayHello promise={promise} />;
}

You see how it returns SayHello component. Another important part of this Server Action is that it doesn't await for the promise to fulfill but it passes the promise as is to the component returned.

So this is the SayHello component returned by the Server Action:

//src/components/say-hello.tsx
"use client";

import { Suspense, use } from "react";

export default function SayHello({ promise }: { promise: Promise<string[]> }) {
  const Comp = () => {
    const data = use(promise);
    return data.map((item) => <div key={item}>{item}</div>);
  };

  return (
    <>
      <div>hey</div>
      <div>
        <Suspense fallback="loading###">
          <Comp />
        </Suspense>
      </div>
    </>
  );
}

Because we needed to access to the resolved value of the promise (an array of strings), we defined a component (Comp) specially for this purpose, that uses use from React, and wrapped it in a Suspense component. In this way the hey content can be displayed immediately, without waiting for the promise to resolve.

There is room for optimization to this approach, and that is to use EnhancedSuspense from react-enhanced-suspense:

//src/components/say-hello.tsx
"use client";

import { EnhancedSuspense } from "react-enhanced-suspense";

export default function SayHello({ promise }: { promise: Promise<string[]> }) {
  return (
    <>
      <div>hey</div>
      <div>
        <EnhancedSuspense
          fallback="Loading###"
          onSuccess={(data) => data.map((item) => <div key={item}>{item}</div>)}
        >
          {promise}
        </EnhancedSuspense>
      </div>
    </>
  );
}

The code for the EnhancedSuspense component is (if you are curious):

import { JSX, ReactNode, Suspense, use } from "react";
import ErrorBoundary from "./error-boundary.js";

type EnhancedSuspenseProps<T> = {
  fallback?: ReactNode;
  children?: Promise<T> | JSX.Element | undefined | string;
  onSuccess?: ((data: T) => ReactNode) | undefined;
  onError?: (error: Error) => ReactNode;
};

const EnhancedSuspense = <T,>({
  fallback = "Loading...",
  children: promise,
  onSuccess,
  onError,
}: EnhancedSuspenseProps<T>) => {
  const Use = () => {
    if (!promise) return null;
    if (
      typeof promise === "string" ||
      ("props" in promise && "type" in promise)
    ) {
      return promise;
    }
    const data = use(promise);
    return onSuccess ? onSuccess(data) : (data as ReactNode);
  };

  return (
    <ErrorBoundary onError={onError}>
      <Suspense fallback={fallback}>
        <Use />
      </Suspense>
    </ErrorBoundary>
  );
};

export default EnhancedSuspense;

Important note regarding deployment/build

The above (return client components by server actions called on client components) works in local or during development phase in Waku. But when you try to build/deploy the project it fails with the following error:

[rsc-transform-plugin] client id not found: //...

This is because the client component returned by the server action has not been used never in the JSX tree. A workaround to this problem is to use the client component returned by the server action in a server component like this:

import "../styles.css";
import type { ReactNode } from "react";
import SayHello from "../components/say-hello"; // 1. import the client component returned by server action

type RootLayoutProps = { children: ReactNode };

export default async function RootLayout({ children }: RootLayoutProps) {
  const data = await getData();

  return (
    <div className="font-['Nunito']">
      <meta name="description" content={data.description} />
      <link rel="icon" type="image/png" href={data.icon} />
      <main className="m-6 flex items-center *:min-h-64 *:min-w-64 lg:m-0 lg:min-h-svh lg:justify-center">
        {children}
      </main>
      {/* 2. use like this the component in the layout to fix deploy/build error */}
      {false && <SayHello />}
    </div>
  );
}

This doesn’t affect functionality of the app and fix the problem on build/deploy. This must be done for every client component returned by server action. In this case we have done it in the _layout.tsx file but can be done also in the react server component page or route file.

This is a Repo to this project.

Summary

In this post we have seen how the leverage of React Server Components and Server Actions by React 19, combined with the use of Suspense component and use function from React, allows us to fetch data once on the client side in an efficient manner, rendering parts of a component while others are still waiting for a promise to fulfill.

We have seen how the EnhancedSuspense from react-enhanced-suspense helps us in dealing with promises in React 19 components. See the link for full documentation and use cases about this component.

We have also seen how Waku it's a great way to start using React 19 right now.

Thanks.

React 19 setup and use of server actions

roggc — Fri, 05 Jul 2024 04:22:45 +0000

TLDR: Github repo

`npm init -y`

Create a folder and run npm init -y in it.

Install dependencies

Install the dependencies with the following command:

npm i webpack webpack-cli react@rc react-dom@rc react-server-dom-webpack@rc babel-loader @babel/core @babel/register @babel/preset-react @babel/plugin-transform-modules-commonjs express

Configure Babel

Add this to your package.json:

  "babel": {
    "presets": [
      [
        "@babel/preset-react",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }

Add scripts to `package.json`

Add the following scripts to your package.json:

"dev": "webpack -w",
"start": "node --conditions react-server server/server.js"

This is how your `package.json` must look

{
  "name": "react-19-essay",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -w",
    "start": "node --conditions react-server server/server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.24.7",
    "@babel/plugin-transform-modules-commonjs": "^7.24.7",
    "@babel/preset-react": "^7.24.7",
    "@babel/register": "^7.24.6",
    "babel-loader": "^9.1.3",
    "express": "^4.19.2",
    "react": "^19.0.0-rc-f38c22b244-20240704",
    "react-dom": "^19.0.0-rc-f38c22b244-20240704",
    "react-server-dom-webpack": "^19.0.0-rc-f38c22b244-20240704",
    "webpack": "^5.92.1",
    "webpack-cli": "^5.1.4"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-react",
        {
          "runtime": "automatic"
        }
      ]
    ]
  }
}

Create the `webpack.config.js` file

At the root of the project, create a webpack.config.js file with the following content:

const path = require("path");
const ReactServerWebpackPlugin = require("react-server-dom-webpack/plugin");

module.exports = {
  mode: "development",
  entry: [path.resolve(__dirname, "./src/index.js")],
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [new ReactServerWebpackPlugin({ isServer: false })],
};

From the look to this configuration file, we know we need a src/index.js file.

Create a `src/index.js` file

Create a src folder and put in it the following file (index.js):

import { use } from "react";
import { createFromFetch } from "react-server-dom-webpack/client";
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));
root.render(<Root />);

const cache = new Map();

function Root() {
  let content = cache.get("home");
  if (!content) {
    content = createFromFetch(fetch("/react"));
    cache.set("home", content);
  }

  return <>{use(content)}</>;
}

You see how we use createFromFetch from react-server-dom-webpack/client.

You also see how we fetch to /react endpoint.

Create a `server/server.js` file

Create a server folder and put in it the following file (server.js):

const register = require("react-server-dom-webpack/node-register");
register();
const path = require("path");
const { readFileSync } = require("fs");
const babelRegister = require("@babel/register");

babelRegister({
  ignore: [/[\\\/](build|server|node_modules)[\\\/]/],
  presets: [["@babel/preset-react", { runtime: "automatic" }]],
  plugins: ["@babel/transform-modules-commonjs"],
});

const { renderToPipeableStream } = require("react-server-dom-webpack/server");

const express = require("express");

const React = require("react");
const ReactApp = require("../src/app").default;

const app = express();

app.get("/", (req, res) => {
  const html = readFileSync(
    path.resolve(__dirname, "../public/index.html"),
    "utf8"
  );
  res.send(html);
});

app.get("/react", (req, res) => {
  const manifest = readFileSync(
    path.resolve(__dirname, "../public/react-client-manifest.json"),
    "utf8"
  );
  const moduleMap = JSON.parse(manifest);
  const { pipe } = renderToPipeableStream(
    React.createElement(ReactApp),
    moduleMap
  );
  pipe(res);
});

app.use(express.static(path.resolve(__dirname, "../public")));
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`listening on port ${port}`));

You see how we use renderToPipeableStream from react-server-dom-webpack/server. You also see how we require a src/app.js file. You also see how we use the public folder for static files.

Create a `public/index.html` file

Create a public file and put in it the following file (index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="React with Server Components" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>fun!</title>
    <script defer src="main.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

The `src` folder

Until here the setup. Now we will focus on creating code for our app. First we need to create the app.js file, the entry point of our app (a React component).

"use client";

import Comp1 from "./non-bloking-server-actions-components/comp1/callable";

export default function () {
  return <Comp1 name="Albert" />;
}

Comp1 is in this case a client component that calls a none bloking server action:

"use client";

import action from "./action";

export default function (props) {
  return action(props);
}

action is the none bloking server action:

"use server";

import Output from "./output";

export default function ({ name }) {
  const messagePromise = new Promise((res) =>
    setTimeout(() => res("hello x " + name), 2000)
  );

  return <Output greetingPromise={messagePromise} />;
}

Output is a React Client Component:

"use client";

import Counter from "../../pure-client-components/counter";
import Wrapper from "../../wrapper";

export default function ({ greetingPromise }) {
  return (
    <>
      <div>
        <Wrapper>{greetingPromise}</Wrapper>
      </div>
      <Counter />
    </>
  );
}

Wrapper is this React Client Component:

"use client";

import { Suspense } from "react";
import ErrorBoundary from "./error-boundary";

export default function Wrapper({ children }) {
  return (
    <ErrorBoundary fallback={<div>Something crashed.</div>}>
      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
    </ErrorBoundary>
  );
}

and Counter is a regular React Client Component:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return <button onClick={increment}>{count}</button>;
}

Conclusion

You see how with the use of non blocking server actions that return client components, server components are not necessary. What we see in this example is counter available and interactive from the first moment, and a loading indicator for a greeting message.

References

The original setup for a working implementation of React Server Components without a framework was taken from here.

jotai-wrapper, a wrapper library around jotai

roggc — Mon, 26 Feb 2024 20:46:45 +0000

I've just published jotai-wrapper, a super tiny and simple utility library that makes using jotai even simpler. It comes from the necessity to migrate a project with react-context-slices to jotai. Both libraries share a similar API. While in react-context-slices you have the useSlice hook, in jotai you have the useAtom, useSetAtom, and useAtomValue hooks. In react-context-slices you define either React Context or Redux slices, while in jotai you define atoms. The need for the migration from the first to the second was a high memory usage by react-context-slices when using React Context slices.

The API

jotai-wrapper default exports a function, getAPIFromAtoms. To use it you must define an atoms.js file in your project, like this:

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

export const { useAtom, useSetAtom, useAtomValue, getAtom, selectAtom } =
  getAPIFromAtoms({
    counter: atom(0),
    todos: atom([]),
    messagesLastFoundId: atom(-1),
    invitationsLastFoundId: atom(-1),
    // rest of atoms
  });

As you can see this function, getAPIFromAtoms, gives us three hooks and two functions.

`useAtom`, `useSetAtom`, and `useAtomValue`

These three hooks behave the same as in jotai, but you pass to them a string instead of an atom (you can still pass them an atom if you wish). For example:

// counter.js
import {useAtom} from "./atoms";

export default function Counter(){
    const [counter,setCounter]=useAtom("counter");

    return <>
    <button onClick={()=>setCounter(c=>c+1)}>+</button>{counter}
    <>;
}

The fact to use strings instead of atoms in the this three hooks allows for dynamic referencing, like this:

// use-last-found-id.js
import { useSetAtom } from "./atoms";

export function useLastFountId({ prefix }) {
  const setLastFoundId = useSetAtom(`${prefix}LastFoundId`);
  // ...
}

`getAtom` and `selectAtom`

These are the other two functions returned by the call to getAPIFromAtoms in atoms.js file.

getAtom simply returns the atom wich the string we pass refers to. For example: const counterAtom = getAtom("counter");.

selectAtom is more useful. We use it like this:

// todos.js
import { selectAtom, useAtomValue } from "./atoms";
import { useMemo } from "react";

export default function Todos({ index, id }) {
  const todoAtIndex = useAtomValue(
    useMemo(() => selectAtom("todos", (todos) => todos[index]), [index])
  );
  const todoWithId = useAtomValue(
    useMemo(
      () =>
        selectAtom("todos", (todos) => todos.find((todo) => todo.id === id)),
      [id]
    )
  );
  //...
}

It's important to note that this selectAtom function returned by the call to getAPIFromAtoms in atoms.js file is different than the selectAtom from jotai. To use the selectAtom from jotai you must import it like this: import {selectAtom} from "jotai/utils";.

Summary

So this is it. You can use jotai with jotai-wrapper in a simpler way. Thanks for reading.

Action client component in NextJS 14

roggc — Wed, 14 Feb 2024 18:21:48 +0000

What we want:

We are on a client component and we want to render another client component with data passed as props, but this data must be fetched from the server. How do we do it?

"use client";
import AnotherClientComponent from "./another-client-component";

export default function AClientComponent(){
  // ...
  return <AnotherClientComponent prop1={/*this data must be fetched in the server*/} /*more props*/>;
}

The idea:

Use server actions to return a client component with data fetched in the server passed as props.

So server action is like this, for example:

"use server";

import Greeting from "@/app/action-components/greeting";
import MyError from "@/app/action-components/my-error";

const DELAY = 500;

const users = [
  { id: 1, username: "roggc" },
  { id: 2, username: "roger" },
];

export async function greeting({ userId }) {
  try {
    const username = await new Promise((r) => {
      setTimeout(() => {
        const user = users.find((u) => u.id === userId);
        if (user) {
          r(user.username);
        }
      }, DELAY);
    });

    // throw new Error("crash!");
    return <Greeting username={username} />;
  } catch (error) {
    return <MyError errorMessage={error.message} />;
  }
}

Greeting and MyError are simple client components that accepts data as props. Like this:

"use client";

export default function Greeting({ username }) {
  return <>hello {username}</>;
}

and

"use client";

export default function MyError({ errorMessage }) {
  return <>Something went wrong: {errorMessage}</>;
}

How do we call these server actions that return client components from within another client component?

"use client";
import { greeting } from "@/app/actions";
import { Suspense } from "react";

export default function AClientComponent() {
  return (
    <Suspense fallback={<>loading...</>}>{greeting({ userId: 1 })}</Suspense>
  );
}

The above works, but gives the following warning: Warning: Cannot update a component ('Router') while rendering a different component ('Client1'). To locate the bad setState() call inside 'Client1', follow the stack trace as described in https://reactjs.org/link/setstate-in-render.

How do we get rid of this warning?

The way I have found is with this:

"use client";
import { greeting } from "@/app/actions";
import { Suspense } from "react";

const callActionAsync = (action, props) =>
  new Promise((r) => setTimeout(async () => r(await action(props))));

const Error = ({ errorMessage }) => <>Something went wrong: {errorMessage}</>;

const getReader = () => {
  let done = false;
  let promise = null;
  let value;
  return {
    read: (action, props) => {
      if (done) {
        return value;
      }
      if (promise) {
        throw promise;
      }
      promise = new Promise(async (resolve) => {
        try {
          value = await callActionAsync(action, props);
        } catch (error) {
          value = <Error errorMessage={error.message} />;
        } finally {
          done = true;
          promise = null;
          resolve();
        }
      });

      throw promise;
    },
  };
};

const Read = ({ action, props, reader }) => {
  return reader.read(action, props);
};

export default function AClientComponent() {
  return (
    <Suspense fallback={<>loading...</>}>
      <Read action={greeting} props={{ userId }} reader={getReader()} />
    </Suspense>
  );
}

So we can make a client component like this:

"use client";

import { Suspense, useMemo } from "react";
import { usePropsChangedKey } from "@/app/hooks";

const callActionAsync = (action, props) =>
  new Promise((r) => setTimeout(async () => r(await action(props))));

const Error = ({ errorMessage }) => <>Something went wrong: {errorMessage}</>;

const getReader = () => {
  let done = false;
  let promise = null;
  let value;
  return {
    read: (action, props) => {
      if (done) {
        return value;
      }
      if (promise) {
        throw promise;
      }
      promise = new Promise(async (resolve) => {
        try {
          value = await callActionAsync(action, props);
        } catch (error) {
          value = <Error errorMessage={error.message} />;
        } finally {
          done = true;
          promise = null;
          resolve();
        }
      });

      throw promise;
    },
  };
};

const Read = ({ action, props, reader }) => {
  return reader.read(action, props);
};

export default function Action({
  action,
  children = <>loading...</>,
  ...props
}) {
  const propsChangedKey = usePropsChangedKey(...Object.values(props));
  const reader = useMemo(() => getReader(), [propsChangedKey]);

  return (
    <Suspense fallback={children}>
      <Read action={action} props={props} reader={reader} />
    </Suspense>
  );
}

being the hook usePropsChangedKey like this:

import { useState, useEffect, useRef } from "react";

export function usePropsChangedKey(...args) {
  const [propsChangedKey, setPropsChangedKey] = useState(0);
  const isFirstRenderRef = useRef(false);

  useEffect(() => {
    isFirstRenderRef.current = true;
  }, []);

  useEffect(() => {
    if (!isFirstRenderRef.current) {
      setPropsChangedKey((k) => k + 1);
    } else {
      isFirstRenderRef.current = false;
    }
  }, [...args]);

  return propsChangedKey;
}

Now when we want to call a server action that returns a client component we do it with the Action client component we have just defined:

"use client";

import Action from "@/app/action";
import { greeting } from "@/app/actions/greeting";
import { useState } from "react";

export default function Client1() {
  const [userId, setUserId] = useState(1);

  return (
    <>
      <Action action={greeting} userId={userId} />
      <button
        onClick={() => {
          setUserId(2);
        }}
      >
        click
      </button>
    </>
  );
}

What if we want to use useSWR?

When using useSWR the Action client component becomes:

"use client";

import { Suspense, useMemo } from "react";
import { usePropsChangedKey } from "@/app/hooks";
import useSWR from "swr";

const fetcher = (action, props) =>
  new Promise((r) => setTimeout(async () => r(await action(props))));

const fetcherSWR = ([action, props]) => fetcher(action, props);

const ReadSWR = ({ swrArgs, fetcher }) => {
  return useSWR(swrArgs, fetcher, {
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    suspense: true,
  }).data;
};

export default function Action({
  action,
  children = <>loading...</>,
  ...props
}) {
  const propsChangedKey = usePropsChangedKey(...Object.values(props));

  const propsForSWR = useMemo(() => props, [propsChangedKey, softKey]);
  const swrArgs = useMemo(() => [action, propsForSWR], [action, propsForSWR]);

  return (
    <Suspense fallback={children}>
      <ReadSWR swrArgs={swrArgs} fetcher={fetcherSWR} />
    </Suspense>
  );
}

Now we can combine the two definitions of Action client component we have shown (one using useSWR and other not) into one:

"use client";

import { Suspense, useMemo } from "react";
import { usePropsChangedKey } from "@/app/hooks";
import useSWR from "swr";

const fetcher = (action, props) =>
  new Promise((r) => setTimeout(async () => r(await action(props))));

const fetcherSWR = ([, action, props]) => fetcher(action, props);

const Error = ({ errorMessage }) => <>Something went wrong: {errorMessage}</>;

const getReader = () => {
  let done = false;
  let promise = null;
  let value;
  return {
    read: (fetcher) => {
      if (done) {
        return value;
      }
      if (promise) {
        throw promise;
      }
      promise = new Promise(async (resolve) => {
        try {
          value = await fetcher();
        } catch (error) {
          value = <Error errorMessage={error.message} />;
        } finally {
          done = true;
          promise = null;
          resolve();
        }
      });

      throw promise;
    },
  };
};

const Read = ({ fetcher, reader }) => {
  return reader.read(fetcher);
};

const ReadSWR = ({ swrArgs, fetcher }) => {
  return useSWR(swrArgs, fetcher, {
    revalidateOnFocus: false,
    revalidateOnReconnect: false,
    suspense: true,
  }).data;
};

export default function Action({
  action,
  children = <>loading...</>,
  isSWR = false,
  ...props
}) {
  const propsChangedKey = usePropsChangedKey(...Object.values(props));

  const reader = useMemo(() => getReader(), [propsChangedKey]);

  const propsForSWR = useMemo(() => props, [propsChangedKey]);
  const swrArgs = useMemo(
    () => [propsChangedKey, action, propsForSWR],
    [action, propsForSWR, propsChangedKey]
  );

  return (
    <Suspense fallback={children}>
      {isSWR ? (
        <ReadSWR swrArgs={swrArgs} fetcher={fetcherSWR} />
      ) : (
        <Read fetcher={() => fetcher(action, props)} reader={reader} />
      )}
    </Suspense>
  );
}

Do not call `Action` client component directly on intial render.

We must do something like this for example:

"use client";

import Client1 from "@/app/components/client-1";
import { useState } from "react";

export default function Home() {
  const [isStart, setIsStart] = useState(false);
  return (
    <>
      <button onClick={() => setIsStart(true)}>start</button>
      {isStart && <Client1 />}
    </>
  );
}

If you do this instead:

"use client";

import Client1 from "@/app/components/client-1";

export default function Home() {
  return (
    <>
      <Client />
    </>
  );
}

you get the following server error:

⨯ unhandledRejection: Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead..

Important final note.

You must import the greeting action, in this case, in the RootLayout server component, like this:

import { Inter } from "next/font/google";
import { greeting } from "@/app/actions/greeting"; // <-- this is necessary, if not fails to compile

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

If you don't do this you get the following error:

⨯ Error: Could not find the module "C:\Users\roggc\dev\nextjs\test1\app\action-components\greeting.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

This happens in NextJS when a client component is only imported in a server action. In this case we were importing the Greeting client component in the greeting server action.

As I have said the workaround is to import the server action in the RootLayout server component. There is an open issue about this.

Summary

We want to fetch data from the server and pass it as props to client components.
For this, we use server actions that return client components.
We call these server actions with the Action client component we have defined.
The Action client component we have defined works also when using useSWR.
Do not call the Action component on initial render.
You must import the server action in the RootLayout server component.
All the source code is in this repository

How to make all local state globally accessible and how much it costs in terms of performance in React

roggc — Mon, 05 Jun 2023 16:56:41 +0000

The use case

We will be coding the following scenario:

So we have a use case where we input the number of counters, and then they will be rendered. Each counter has two buttons, the first one controls its own local state, the second one controls the local state of next counter. And also, they show the value of the input text entered (in this case a number) and its name (each instance of a component have a unique name).

We will compare how much it costs to make all local state globally accessible in terms of performance. We will see that the curve is exponential, that is, the time it takes to render all components vs the number of components.

Considerations

Because we don't know what number of counters will be rendered (can be any), we can not lift up state declaration to the upper component in the tree, because it will be variable, and we cannot call each time a different number of hooks.

So we must declare state locally. To make it globally accessible we will use the library react-context-slices, which allows to manage state through Context in an easy and fast way.

Using this library, we will create a slice of context to store there all the values of state (and setters). For this we will create two hooks, useAddState and useGetState. The first one will create state with useState and add the values (value and setter) to the slice of context. The second one will recover those values.

`slices.js`

First, when using this library, we must create a slices.js file like this:

import getHookAndProviderFromSlices from "react-context-slices";

export const { useSlice, Provider } = getHookAndProviderFromSlices({
  globalState: { initialArg: {} },
});

As you can see we are creating a slice of Context named globalState, initialising it with an empty object.

`useAddState` and `useGetState` hooks

Now we define those hooks.

import { useEffect, useState } from "react";
import { useSlice } from "@slices";

export const useAddState = (initialValue, id) => {
  const [, setGlobalState] = useSlice("globalState");
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setGlobalState((gS) => ({
      ...gS,
      [id]: [value, setValue],
    }));
  }, [value, id, setGlobalState, setValue]);

  return [value, setValue];
};

This hook creates state with useState and stores it in the Context.

import { useSlice } from "@slices";

export const useGetState = (id) => {
  const [globalState] = useSlice("globalState");
  return globalState[id] ?? [];
};

This hook recovers state values from Context.

The `App` component

import Counter from "@components/counter";
import { useAddState, useGetState } from "@src/hooks";
import { useDeferredValue, useEffect, useMemo, useRef } from "react";
import CounterVisualiser from "@components/counter-visualiser";

const App = () => {
  const timeRef = useRef(new Date().getTime());
  const [numberOfCounters, setNumberOfCounters] = useAddState(
    0,
    "app-number-of-components"
  );
  const [text, setText] = useAddState("", "app-input-text");
  const [count] = useGetState("counter0-counter");

  useEffect(() => {
    if (count === 0) {
      const duration = (new Date().getTime() - timeRef.current) / 1000;
      console.log("duration", duration, numberOfCounters);
    }
  }, [count, numberOfCounters]);

  const slicesJsx = useMemo(
    () =>
      Array.from({ length: numberOfCounters }, (_, i) => i).map(
        (v, i, array) => (
          <Counter
            key={v}
            componentName={`counter${v}`}
            otherComponent={`counter${v === array.length - 1 ? 0 : v + 1}`}
          />
        )
      ),
    [numberOfCounters]
  );

  const jsx = useMemo(() => {
    return (
      <>
        <div>
          <input
            type="text"
            value={text ?? ""}
            onChange={(e) => setText(e.target.value)}
          />
          <button onClick={() => setNumberOfCounters(parseInt(text))}>
            set number of counters
          </button>
        </div>
        <CounterVisualiser id="counter10-counter" />
        {slicesJsx}
      </>
    );
  }, [text, slicesJsx, setNumberOfCounters, setText]);

  return jsx;
};

export default App;

What this component does is render the jsx and compute the time it takes to the page to be operative, ready to be used and to interact with.

`Counter` component

import { useGetState, useAddState } from "@src/hooks";
import { useMemo, useEffect, useDeferredValue } from "react";

const Counter = ({ componentName, otherComponent }) => {
  const [count, setCount] = useAddState(0, `${componentName}-counter`);
  const [, setCountOtherComponent] = useGetState(`${otherComponent}-counter`);
  const [inputText] = useGetState("app-input-text");
  const defferredInputTexT = useDeferredValue(inputText);

  const jsx = useMemo(() => {
    return (
      <div>
        <button onClick={() => setCount((c) => c + 1)}>+</button>
        {count}
        <button onClick={() => setCountOtherComponent((c) => c + 1)}>+</button>
        {defferredInputTexT}
        {componentName}
      </div>
    );
  }, [
    count,
    defferredInputTexT,
    componentName,
    setCountOtherComponent,
    setCount,
  ]);

  return jsx;
};

export default Counter;

Is important to note the use of useMemo for the rendered jsx. If we do not use useMemo, it will compute each time the rendered jsx for all counters, because all counters will render each time any of them change its state, because all of them react to the global state change. So to avoid cost of computation of jsx each time (because only one counter of all of them will effectively change its jsx), we use useMemo. We do not avoid that each counter renders each time, but at least we optimise the process of rendering a little bit.

Also note how we use useDefferredValue hook for the input text of the App component. This allows the user to enter text and deffer the update of this in the counters.

The `CounterVisualiser` component

The CounterVisualiser component, rendered in the jsx of the App component, is just here to prove that state in this project is reactive, that is, that components consuming the global state updates.

import { useGetState } from "@src/hooks";
import { useDeferredValue } from "react";

const CounterVisualiser = ({ id }) => {
  const [count] = useGetState(id);
  const defferredCount = useDeferredValue(count);
  return <div>{`${id}: ${defferredCount}`}</div>;
};

export default CounterVisualiser;

It just get state from the global state and renders it.

Costs in terms of performance

Here is a plot of the time it takes to the page to be operative on first render vs the number of components:

This is approximately, but we can observe an exponential shape. Let's say that until 4000 it's almost linear. More than 4000 components (counters in this case) the costs in terms of performance are evident.

Summary

The purpose of this project is to know how much it costs in terms of performance make all local state globally accessible.

This implies that all components will render each time any of them change the state (I say 'the state' because it's global and all components are reactive to it).

We see that when there are more than 4000 components in the page performance gets penalised quite a lot. Even 4000 takes the page around 30 seconds to be operative (3000 components takes 20 seconds, 2000 components takes 13 seconds and 1000 components 5 seconds).

So it's cool to have all the components of the page reacting to state changes of any part in the component tree, but we pay a price in terms of performance when we have thousands of components in the page, because all of them will render each time any part of the global state changes.

Thanks for reading and happy coding.

React Context consumer only updates when state defined in Provider wrapper component changes

roggc — Sun, 04 Jun 2023 16:54:37 +0000

...and not when value supplied to Context.Provider changes.

Introduction

After having developed react-context-slices, a library for state management with React (post here), I have realised and discovered that fact, that React Context consumers only updates or re-render when state defined in Provider wrapper component changes, not when value supplied to Context.Provider changes (this answer of me in stackoverflow shows it).

Demonstration

In case you don't click the previous link, I will explain it here.

Suppose we have the following code:

// provider.jsx
import { createContext, useReducer, useContext } from "react";

const StateContext = createContext({});
const DispatchContext = createContext(() => {});

const reducer = (state, { type, payload }) => {
  switch (type) {
    case "set":
      return typeof payload === "function" ? payload(state) : payload;
    default:
      return state;
  }
};

export const useMyContext = () => useContext(StateContext);
export const useMyDispatchContext = () => useContext(DispatchContext);

let id = 0;

const Provider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { foo: "bar" });
  console.log("rendering provider");
  return (
    <StateContext.Provider value={{ ["value" + id++]: state.foo }}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
};

export default Provider;

As you can see we define a Provider wrapping component, where the state is created, and we pass a value to the StateContext.Provider that changes with every render of the Provider wrapping component.

Now let's define our consumer, App component:

// app.jsx
import { useMyContext, useMyDispatchContext } from "./provider";

const App = () => {
  const value = useMyContext();
  const dispatch = useMyDispatchContext();
  console.log("value", value);
  return (
    <>
      <button onClick={() => dispatch({ type: "set", payload: (s) => s })}>
        =
      </button>
      <button
        onClick={() => dispatch({ type: "set", payload: (s) => ({ ...s }) })}
      >
        not =
      </button>
      {JSON.stringify(value)}
    </>
  );
};

export default App;

We have two buttons, = and not =. The first doesn't change the state defined in the Provider wrapper component, only not = does. Let's see what happens when interacting with this two buttons. First I will click several times = button, and then, after that, I will click once not = button. This is the result:

As you can see the result shows that when pressing = button rendering provider is written to the console, but no value is written to the console, so App doesn't re-render. It's only when pressing not = button that value gets printed in the console. But the fact to notice is that the value of value is {value9: 'bar'} while the previous value printed was {value1: 'bar'}. This shows and demonstrate that despite value in StateContext.Provider changing, the App component (consumer) didn't updated, it only did when state changed.

Explanation (why this happens)

This is some how a surprising behaviour and something a lot of people may not know. The reason for this behaviour is written in the documentation of React regarding the useReducer hook:

If the new value you provide is identical to the current state, as determined by an Object.is comparison, React will skip re-rendering the component and its children. This is an optimization. React may still need to call your component before ignoring the result, but it shouldn’t affect your code.

Here the important part is everything. It says that "React will skip re-rendering the component and its children" based on an "Object.is comparison" of the state value. And also it says that "React may still need to call your component before ignoring the result". This explains why we see the output in the console rendering provider.

Credits to super on stackoverflow for pointing me to it.

A note about the React documentation

The sentence "but it shouldn’t affect your code" isn't entirely true. Suppose I do this:

const Provider = ({ children }) => {
  const idRef = useRef(0);
  const [state, dispatch] = useReducer(reducer, { foo: "bar" });
  console.log("rendering provider");
  return (
    <StateContext.Provider value={{ ["value" + idRef.current++]: state.foo }}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
};

As you see I use the useRef hook and change its current value in each execution of the Provider wrapper component.

This is the result in the console:

As you can see it can have effects in our code. The thing is the Provider wrapper component gets executed each time, despite state doesn't change, and the sentence "before ignoring the result" doesn't imply that if you change the current value of a ref or a global value, this will be ignored. No, it will stay changed. Just to know that.

Conclusion

So when using Context.Provider in a wrapping component that creates state with useReducer (or useState also applies) as we have done here (and that is a very usual pattern), there is no need for optimisation with useMemo in the value we pass to the Context.Provider, because if state defined by the useReducer hook doesn't change in an Object.is comparison, then React, despite calling the Provider wrapper component, will ignore the result and will skip re-rendering the wrapping component and its children.

But the sentence in the React documentation "but it shouldn’t affect your code" isn't entirely true. Keep in mind that if you use useRef in the Provider wrapper component, and change its current value in each execution of the Provider component, this will stay changed, so the sentence "before ignoring the result" isn't entirely true or at least we have to keep this side effects in mind (like changing the value of a global variable too).

Thanks for reading and happy coding.

React 18: Streaming SSR with Suspense and data fetching on the server (How to)

roggc — Sun, 15 May 2022 17:51:04 +0000

The problem

When you try to do data fetching on the server with streaming SSR with Suspense in React 18 you face a problem, and it is the hydration mismatch. Here we will explain a way to solve it (solution extracted from here).

The solution

Here is the code of the server app:

import express from "express";
import { renderToPipeableStream } from "react-dom/server";
import React from "react";
import AppServer from "../src/components/AppServer";
import path from "path";
import { DataProvider, data } from "../src/providers/data";
import { createServerData } from "../src/api/resource";
import { Writable } from "node:stream";

const app = express();
const port = 3000;
app.get("/", (req, res) => {
  const stream = new Writable({
    write(chunk, _encoding, cb) {
      res.write(chunk, cb);
    },
    final() {
      res.write(
        `<script>
        window.globalCache={comments:[${data.comments.map((c) => `'${c}'`)}]}
        </script>`
      );
      res.end("</body></html>");
    },
  });
  const { pipe } = renderToPipeableStream(
    <DataProvider data={createServerData()}>
      <AppServer />
    </DataProvider>,
    {
      bootstrapScripts: ["/main.js"],
      onShellReady() {
        res.write("<html><body>");
        pipe(stream);
      },
    }
  );
});

app.use(express.static(path.join(__dirname, "/../dist")));

app.listen(port, () => {
  console.log(`app running on port ${port}`);
});

The key point is in here:

 const stream = new Writable({
    write(chunk, _encoding, cb) {
      res.write(chunk, cb);
    },
    final() {
      res.write(
        `<script>
        window.globalCache={comments:[${data.comments.map((c) => `'${c}'`)}]}
        </script>`
      );
      res.end("</body></html>");
    },
  });

We are writing a script at the end of the streaming to populate the globalCache variable in the browser with data on the server.

This is where data comes from:

import React, { createContext, useContext } from "react";

export let data;

const DataContext = createContext(null);

export function DataProvider({ children, data }) {
  return <DataContext.Provider value={data}>{children}</DataContext.Provider>;
}

export function useData() {
  const ctx = useContext(DataContext);
  if (ctx) {
    data = ctx.read();
  } else {
    data = window.globalCache;
  }
  return data;
}

On the server data is read from the context while on the browser it is read from the globalCache variable. That's how we avoid the hydration mismatch problem.

Let's see at the createServerData function:

export function createServerData() {
    let done = false;
    let promise = null;
    let value
    return {
      read: ()=> {
        if (done) {
          return value
        }
        if (promise) {
          throw promise;
        }
        promise = new Promise((resolve) => {
          setTimeout(() => {
            done = true;
            promise = null;
            value={comments:['a','b','c']}
            resolve()
          }, 6000);
        });
        throw promise;
      }
    };
  }

It's a promise that resolves in 6000 ms.

Now let's look at where we use the useData hook, in the Comments component:

import React from "react";
import { useData } from "../providers/data";

export default function Comments() {
  const { comments } = useData();

  return (
    <ul>
      {comments && comments.map((comment, i) => <li key={i}>{comment}</li>)}
    </ul>
  );
}

In the server it will read data from the Context while in the browser it will read data from the global variable globalCache. This is because in the browser the context will be undefined, that is because in the case of the browser we are not wrapping the App component with the DataProvider:

import React from "react";
import { hydrateRoot } from "react-dom/client";
import App from "./components/App";

hydrateRoot(document.getElementById("root"), <App />);

This is how the App component looks like:

import React, { Suspense, lazy } from "react";

const Comments = lazy(() => import("./Comments"));

const App = () => (
  <>
    <Suspense fallback={<div>loading...</div>}>
      <Comments />
    </Suspense>
  </>
);

export default App;

And here how the AppServer component, used above (in the server), looks like:

import React from "react";
import App from "./App";

const AppServer = () => (
      <div id="root"> 
        <App />
       </div> 
);

export default AppServer;

With that we have seen all the code of this example on how to do streaming SSR with Suspense and data fetching on the server in React 18 avoiding the problem of hydration mismatch.

How to fetch data in React with Suspense and ErrorBoundary

roggc — Mon, 11 Apr 2022 15:48:22 +0000

When we want to fetch data, we are dealing with a promise, so we have three possible scenarios:

the promise resolves and it's a success
the promise resolves and it's a failure (dealt by ErrorBoundary component)
the promise is in a pending state (dealt by Suspense component)

So this is how our code will look at a high level:

function App() {
  return (
    <>
    <ErrorBoundary>
      <Suspense fallback={<h1>Loading blog...</h1>}>
        <BlogPost resource={resource1} />
        <Share />
      </Suspense>
      </ErrorBoundary>
    </>
  );
}

BlogPost it's a component which reads on the state of a promise:

function BlogPost({resource:{read}}) {
  const {title,body} = read();
  // ...

where resource is an object created by function createResource:

const resource1=createResource(fetchPosts(0))

Let's look at the definition of createResource:

function createResource(promise){
    let error,response
    promise.then(r=>response=r).catch(e=>(error=e))
    return {
        read(){
            if(error)throw error
            if(response) return response
            throw promise
        }
    }
}

As you see the read function can throw a promise, an error or return a successful response. It's like if the promise would be catch by the Suspense component and renders the fallback prop. The error would be catch by the ErrorBoundary component, which we are going to see in a sec, and will render an ErrorScreen component. When the promised is resolved successfully, the children of Suspense will be rendered.

This is the ErrorBoundary component:

import {Component} from 'react'

function ErrorScreen({error:{message}}){
    return <div>
        Something went wrong: {message}
        </div>
}

class ErrorBoundary extends Component{
    state={error:null}
    static getDerivedStateFromError(e){
        return {error:e}
    }
    render(){
        const {children,fallback}=this.props
        const {error}=this.state
        if(error&&!fallback)return <ErrorScreen error={error} />
        if(error)return <fallback error={error} />
        return children
    }
}

export default ErrorBoundary

As you see it works similarly to the Suspense one, accepting a fallback property, which in this case defaults to the render of ErrorScreen component.

Let's see at the definition of fetchPosts() function:


  let blogPosts = [
    {
      id: 1,
      title: 'qui est esse',
      body: 'est rerum tempore vitae\nsequi sint nihil reprehenderit'
    },
  ];

  export function fetchPosts(id) {
    let post = blogPosts[id];
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log("fetched blogs");
        resolve(post);
      }, 2000);
    });
  }

As we can see, it returns a promise.

For completion, let's see at the definition of BlogPost and Share components:

function Share() {
  useEffect(() => {
    console.log("Effect Share");

    return () => {
      console.log("Cleanup Share");
    };
  });

  console.log("Render Share");
  return (
    <div>Share:&nbsp;
      <span> twitter</span>
      <span> reddit</span>
    </div>
  )
}

function BlogPost({resource:{read}}) {
  const {title,body} = read();

  useEffect(() => {
    console.log("Effect BlogPost");
    return () => {
      console.log("Cleanup BlogPost");
    };
  });

  return (
    <div>
      <h1>Blog Post</h1>
      <h3>{title}</h3>
      <span>{body}</span>
    </div>
  );
}

And this is the output on the console when executing the app:

As you can see, with react 18 the Share component doesn't render until the BlogPost is ready, because they all belong to the children of the Suspense component. If we used react 17 instead, this would be the output in the console:

As you can see, it renders first the Share component before resolving the promise, and then, after the promise has been resolved successfully, it renders the BlogPost component.

useReducer Hook Use Cases In React

roggc — Wed, 06 Apr 2022 20:04:30 +0000

I want to present you in this post some use cases for useReducer hook.

These are three.

Toggle

When we want to toggle state, being state a boolean, we can do:

import {useReducer} from 'react'

export const useToggle= (initialState=false)=>{
  const [isSomething, toogleIsSomething]= useReducer(state=> !state, initialState)
  return [isSomething,toggleIsSomething]
}

So whenever we want to use this hook we can do:

function SomeComponent(){
  const [isSome, toogleIsSome]=useToggle()
  return ...
}

export default SomeComponent

Update

Another use case is when we want to update state, we can do so:

import {useReducer} from 'react'

export const useUpdate= (initialState={})=> {
  const [state, updateState]= useReducer((state, obj)=>({...state, ...obj}), initialState)
  return [state, updateState]
}

We can use it like this:

function AnotherComponent(){
  const [state, updateState]= useUpdate({c:3})

  const someHandler= ()=>{
    updateState({a:1,b:2}) // after that state will be {a:1, b:2, c:3}
  }

  return ...
}

export default AnotherComponent

Dispatch

Then we have the typical use case where we pass an action as a second parameter to the reducer function and we get a dispatch function as a result:

const reducer=(state, action)=>{
  switch(action.type){
    case 'UPDATE':
      return {...state, ...action.payload}
    default:
      return state
  }
}

function ThirdComponent(){
  const [state, dispatch]= useReducer(reducer,{c:3})

  const someHandler= ()=> {
    dispatch({type:'SOMETHING', payload: {a:1, b:2}})
  }


  return ...
}

export default ThirdComponent

If you come with another use case not presented in this post please it would be nice if you leave it in the comments.

Thanks.

DEV Community: roggc

How to Fetch data in Dinou with react-enhanced-suspense and Server Functions that return Client Components

dinou: a minimal React 19 framework

KendoReact Challenge Submission: A Waku Project

What I Built

Demo

KendoReact Experience

React 19, Waku, react-enhanced-suspense and Server Actions: how to fetch data efficiently in the Client

Important note regarding deployment/build

Summary

React 19 setup and use of server actions

npm init -y

Install dependencies

Configure Babel

Add scripts to package.json

This is how your package.json must look

Create the webpack.config.js file

Create a src/index.js file

Create a server/server.js file

Create a public/index.html file

The src folder

Conclusion

References

jotai-wrapper, a wrapper library around jotai

The API

useAtom, useSetAtom, and useAtomValue

getAtom and selectAtom

Summary

Action client component in NextJS 14

Do not call Action client component directly on intial render.

Important final note.

Summary

How to make all local state globally accessible and how much it costs in terms of performance in React

The use case

Considerations

slices.js

useAddState and useGetState hooks

The App component

Counter component

The CounterVisualiser component

Costs in terms of performance

Summary

React Context consumer only updates when state defined in Provider wrapper component changes

Introduction

Demonstration

Explanation (why this happens)

A note about the React documentation

Conclusion

React 18: Streaming SSR with Suspense and data fetching on the server (How to)

The problem

The solution

How to fetch data in React with Suspense and ErrorBoundary

useReducer Hook Use Cases In React

Toggle

Update

Dispatch

`npm init -y`

Add scripts to `package.json`

This is how your `package.json` must look

Create the `webpack.config.js` file

Create a `src/index.js` file

Create a `server/server.js` file

Create a `public/index.html` file

The `src` folder

`useAtom`, `useSetAtom`, and `useAtomValue`

`getAtom` and `selectAtom`

Do not call `Action` client component directly on intial render.

`slices.js`

`useAddState` and `useGetState` hooks

The `App` component

`Counter` component

The `CounterVisualiser` component