Next.js Discord

Discord Forum

useEffect issues with Next.JS

Unanswered
Polish posted this in #help-forum
Open in Discord
PolishOP
Above is the code I'm using but I constantly get this error:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
1 │ import React, { useState, useEffect } from "react";
· ─────────
2 │
3 │ interface DataBoxProps {
3 │ title: string;
╰────

Maybe one of these should be marked as a client entry with "use client":
./src\app\portal\overview[customer]\page.tsx

I'm unsure how to properly fix the structure of what I'm trying to do here.

10 Replies

PolishOP
import React, { useState, useEffect } from "react";

interface DataBoxProps {
    title: string;
    number: number;
}

function DataBox({ title, number }: DataBoxProps): JSX.Element {
    return (
        <div className="box bg-white shadow-md rounded-lg p-4">
            <h2 className="text-lg font-bold">{title}</h2>
            <p className="text-xl">{number}</p>
        </div>
    );
}

export default function OverviewPage(): JSX.Element {
    const [data, setData] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch('/api/overview/overview');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                setData(data);
            } catch (error) {
                console.error('Error fetching data:', error);
            } finally {
                setIsLoading(false);
            }
        }

        fetchData();
    }, []);

    if (isLoading) {
        return <p>Loading...</p>;
    }

    if (error) {
        return <p>Error loading data: {error}</p>;
    }

    return (
        <div>
            <h1>Overview</h1>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {data.map(({ title, number }) => (
                    <DataBox key={title} title={title} number={number} />
                ))}
            </div>
        </div>
    );
}
Jesse
bro
it literally tells you
just add "use client" to the top of your component
PolishOP
Sorry, yes I know that - but my understanding was that you should aim to avoid that as much as possible in Next.JS
I was more checking that wasn't just a band-aid
@Polish Sorry, yes I know that - but my understanding was that you should aim to avoid that as much as possible in Next.JS
Ray
I think it depends on the use case. And it is totally fine to use with client component to get the job done and try to reduce it after if there are too much js sent to client.
also, you don't need to create a seperate route handler for data fetching, just query it from database in the server component