CODEWITHSUNDEEP
reactjsserverreact-server-components
Laurence Fass
Laurence Fass

Reputation: 1942

If useState is not supported by React server components how do we assign component state for rendering

Im trying to understand React server components and how to render component state without the use of useState and useEffect. I have created a server component with an embedded client component and both fetch a small amount of data and display as JSON.

The client component works as expected and renders the json data fetched from the API.

main.client.tsx

import { useEffect, useState } from "react"

export default function Main() {
    let [data, setData] = useState(undefined);

    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    useEffect(()=>{
        fetchData().then(value => {
            setData(value);
            console.log("data", data)
        });
    }, [])

    return (<div className="component">
        <h1>Client Main</h1>
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
    </div>)
}

The server component doesnt re-render the json data. Its basiically a duplicate of the client code without useEffect, useRef and useState because they are not availabe on the server.

It renders the initialised data but not the fetched data.

main.server.tsx

import Client from "../components/main.client"

export default function Main() {
    let data = {key: "initial value"};
    let hello = "hello world";
    
    async function fetchData() {
        let value = await fetch("https://jsonplaceholder.typicode.com/posts");
        let result = await value.json();
        let slice = result.slice(0,2);
        return slice;
    }

    fetchData().then(value => {
        data = [...value];
        console.log("data", data)
    });

    return (<div className="component">
        <h1>Server Main</h1>
        {hello}
        {data &&
            <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>
        }
        <Client/>
    </div>)
}

how can i correctly assign the data array (returned from the fetch) so it renders on the server?

Upvotes: 9

Views: 9732

Answers (1)

Jhonatan Oliveira
Jhonatan Oliveira

Reputation: 77

If you're using Next.JS, it's probably that you need to use "'use client';" before any import to fix this problem. See this example:

"use client";
import { useState } from "react";
import Image from "next/image";
import { Inter } from "@next/font/google";

Hope it helps you.

Upvotes: 6

Related Questions