Next.js Discord

Discord Forum

Why does this console.log(opponentData) multiple times, like 4-5 times on page load and on refocus?

Unanswered
Manx posted this in #help-forum
Open in Discord
ManxOP
import * as React from "react";
import { TableCell, TableRow } from "~/components/ui/table";
import Image from "next/image";
import { Badge } from "~/components/ui/badge";
import { useEffect, useState } from "react";
import { Skeleton } from "~/components/ui/skeleton";

interface OpponentData {
  name: string;
  image: string;
  status: string;
  price: string;
  points: number;
  date: string;
}

interface ApiResponse {
  data: OpponentData;
}

export default function OpponentTableRow() {
  const [opponentData, setOpponentData] = useState<OpponentData | null>(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch("/api/dashboard");
      if (!res.ok) {
        throw new Error("Failed to fetch data");
      }
      const responseJson = (await res.json()) as ApiResponse;
      const data: OpponentData = responseJson.data;
      setOpponentData(data);
    }

    fetchData().catch(console.error);
  }, []);

  console.log(opponentData);

  if (!opponentData) {
    return (
      <TableRow>
        <TableCell className="hidden sm:table-cell">
          <Skeleton className="h-11 w-11 rounded-full" />
        </TableCell>
        <TableCell>
          <Skeleton className="h-4 w-24 rounded-2xl" />
        </TableCell>
        <TableCell>
          <Skeleton className="h-4 w-16 rounded-2xl" />
        </TableCell>
        <TableCell>
          <Skeleton className="h-4 w-12 rounded-2xl" />
        </TableCell>
        <TableCell className="hidden md:table-cell">
          <Skeleton className="h-4 w-8 rounded-2xl" />
        </TableCell>
        <TableCell className="hidden md:table-cell">
          <Skeleton className="h-4 w-20 rounded-2xl" />
        </TableCell>
      </TableRow>
    );
  }

  return (
    <TableRow>
      <TableCell className="hidden sm:table-cell">
        <Image
          alt="Product image"
          className="rounded-full object-cover"
          height="44"
          src={opponentData.image}
          width="44"
        />
      </TableCell>
      <TableCell className="font-medium">{opponentData.name}</TableCell>
      <TableCell>
        <Badge variant="outline">{opponentData.status}</Badge>
      </TableCell>
      <TableCell>{opponentData.price}</TableCell>
      <TableCell className="hidden md:table-cell">
        {opponentData.points}
      </TableCell>
      <TableCell className="hidden md:table-cell">
        {opponentData.date}
      </TableCell>
    </TableRow>
  );
}


I can't for the life of me figure out why this is logging out so many times?

The component is only called once in the parent component as seen here

<TableBody>
                    <UserTableRow user={session.user} />
                    <OpponentTableRow />
                  </TableBody>


Also excuse any glaring issues as i'm still rather new to NextJs and also React.

2 Replies

ManxOP
Just to be clear, on refocus it console logs again once but on the screenshot attached this is how many times it is logged 🤔
ManxOP
interface OpponentData {
  name: string;
  image: string;
  status: string;
  price: string;
  points: number;
  date: string;
}

export async function GET() {
  const opponentData: OpponentData = {
    name: "Laser Lemonade Machine",
    image: "/Rick.png",
    status: "Draft",
    price: "499.99",
    points: 25,
    date: "2023-07-12 10:42 AM",
  };

  return new Response(
    JSON.stringify({
      data: opponentData,
    }),
    {
      headers: {
        "Content-Type": "application/json",
      },
    },
  );
}


Here is the route file for visibility...