fetch in client compnent gets called like six times

Unanswered

Bully Kutta posted this in #help-forum

Bully KuttaOP

2024-07-18T10:09:55.926Z

'use client';
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from "./ui/button";
import { useState } from "react";

export function Builder() {
    let builds = []
    const [loadingBuilds, setLoadingBuilds] = useState(true)
    const buildsRequest = fetch(
        '/api/protected/builds/'
    )
        .then(
            response => response.json()
        )
        .then(
            response => {
                builds = response
                setLoadingBuilds(false)
            }
        )


    return (
        <div>
            {
                !loadingBuilds &&
                <Table>
                    <TableCaption>Builds</TableCaption>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Name</TableHead>
                            <TableHead>Creation date</TableHead>
                            <TableHead>Type</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableCell className="font-medium">Name</TableCell>
                            <TableCell>Date created</TableCell>
                            <TableCell>Type</TableCell>
                            <TableCell className="flex justify-end"><Button>Del</Button></TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            }
            {
                loadingBuilds && <h1>Loading...</h1>
            }
        </div>
    );
}

export default Builder;

the fetch is called 6 times exactly for some reason. i only use thios Builder component once in a page.tsx
im so confused brahs

18 Replies

@Bully Kutta jsx 'use client'; import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table" import { Button } from "./ui/button"; import { useState } from "react"; export function Builder() { let builds = [] const [loadingBuilds, setLoadingBuilds] = useState(true) const buildsRequest = fetch( '/api/protected/builds/' ) .then( response => response.json() ) .then( response => { builds = response setLoadingBuilds(false) } ) return ( <div> { !loadingBuilds && <Table> <TableCaption>Builds</TableCaption> <TableHeader> <TableRow> <TableHead>Name</TableHead> <TableHead>Creation date</TableHead> <TableHead>Type</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell className="font-medium">Name</TableCell> <TableCell>Date created</TableCell> <TableCell>Type</TableCell> <TableCell className="flex justify-end"><Button>Del</Button></TableCell> </TableRow> </TableBody> </Table> } { loadingBuilds && <h1>Loading...</h1> } </div> ); } export default Builder; the fetch is called 6 times exactly for some reason. i only use thios Builder component once in a page.tsx im so confused brahs

@ts-ignore

2024-07-18T10:13:16.232Z

It will be called as many times the component re render

you are setting a state in then which causes a re render which runs this again which again updates the state and loop continues

@@ts-ignore It will be called as many times the component re render you are setting a state in `then` which causes a re render which runs this again which again updates the state and loop continues

Bully KuttaOP

2024-07-18T10:13:59.909Z

i cant use async await

ina cliient component

apparently

what do ya reccomend i do

@ts-ignore

2024-07-18T10:14:55.212Z

fetch data serverside/in useEffect

@@ts-ignore fetch data serverside/in useEffect

Bully KuttaOP

2024-07-18T10:15:51.242Z

i need this to be a client component beause i need to handle button clicks and stuff

ohg wait

i can just

fetch the build data and pass it onto my Builder as a param

thanks

@@ts-ignore fetch data serverside/in useEffect

Bully KuttaOP

2024-07-18T10:30:04.240Z

    useEffect(() => {
        fetch('/api/protected/builds/')
            .then(
                response => response.json()
            )
            .then(
                response => setBuilds(response)
            )
    }, [])

even tho i have an empty array use effect is runnin twice? once for page load and another time for when i call setBuilds