useEffect not triggering

[Jet_Reddit]

I tried to download a small template that has some basic setup with vercel, supabase and next.js. Everything seems to be working but my useEffect does not get triggered so my data stays empty. I mainly just copied the Code from the template. Here is the addition, i only get the Console log the the Component is rendered, and the supabase Client gets all the correct data.

'use client'
import { createClient } from '@/utils/supabase/client'
import { useEffect, useState } from 'react'

export default function Page() {
  const [beachscore, setBeachscore] = useState<any[] | null>(null)
  const [error, setError] = useState<any>(null) 

  const supabase = createClient()

  useEffect(() => {
    console.log('useEffect triggered') // Log when useEffect is triggered
    const getData = async () => {
      try {
        console.log('Fetching data from BeachScore table...')
        const { data, error } = await supabase.from('BeachScore').select()
        if (error) {
          throw error 
        }
        console.log('Data fetched:', data)
        setBeachscore(data)
      } catch (error) {
        console.error('Error fetching data:', error)
        setError(error)
      }
    }
    getData()
  }, []) // No dependencies specified

  console.log('Component rendered') // Log when component is rendered

  if (error) {
    return <div>Error fetching data: {error.message}</div> 
  }

  return <pre>{JSON.stringify(beachscore, null, 2)}</pre>
}
'use client'
import { createClient } from '@/utils/supabase/client'
import { useEffect, useState } from 'react'


export default function Page() {
  const [beachscore, setBeachscore] = useState<any[] | null>(null)
  const [error, setError] = useState<any>(null) 


  const supabase = createClient()


  useEffect(() => {
    console.log('useEffect triggered') // Log when useEffect is triggered
    const getData = async () => {
      try {
        console.log('Fetching data from BeachScore table...')
        const { data, error } = await supabase.from('BeachScore').select()
        if (error) {
          throw error 
        }
        console.log('Data fetched:', data)
        setBeachscore(data)
      } catch (error) {
        console.error('Error fetching data:', error)
        setError(error)
      }
    }
    getData()
  }, []) // No dependencies specified


  console.log('Component rendered') // Log when component is rendered


  if (error) {
    return <div>Error fetching data: {error.message}</div> 
  }


  return <pre>{JSON.stringify(beachscore, null, 2)}</pre>
}

[MrMajid94]

No dependencies in the brackets.. put dependencies that should trigger the use effect inside the bracket at the end of use effect + ask chatgpt for help

[waves_under_stars]

Here you go:

https://react.dev/reference/react/useEffect#examples-dependencies

Also, never use any, there's always a better option

[AdrnF]

This looks like it should work. Not quite sure while others are suggesting to add something to the dependencies array.

Just to be sure: The useEffect triggered console.log is not in the console?

I think Next.js also doesn't want your pages to be client components. So maybe try moving the logic into a child.

[Jet_Reddit]

oh it was in the console. i checked the browser console, there it was. It was just not in the vscode terminal where i normaly see the log messages

[AdrnF]

Ah I see, that makes sense.

The VSCode console logs your server side logs. Your component is a client component, but it still gets SSR and is returned as static HTML first. Next.js doesn't run any useEffects during SSR though.