Currently for NextJS 13 app file structure is like:

├── app
|   ├── components
|      └── Dashboard.tsx
│   ├── dashboard
│      └── pages.tsx

My main issue is I cannot get my UseEffect to fire off as it currently is. Not sure why not because I have looked a lot online and found this way very common. my Dashboard component logs "Hello World" and renders the h1 but does not execute the useEffect hook.

Dashboard.tsx

'use client'

import React from 'react'


export default function Dashboard() {

    console.log("Hello World")

    useEffect(() => {
        console.log("useEffect")
    }, []);

    return (
        <>
            <h1>Tickers</h1>
        </>
    )
}

dashboard/page.tsx

import React from 'react'
import Dashboard from '../components/Dashboard'

export default function DashboardPage() {

    return (
        <>
            <h1>Dashboard</h1>
            <Dashboard />
        </>
    )
}

UPDATE:

I started a fresh NextJS Project and tried doing the same dashboard route and the useEffect still would not fire off for some reason.