import React from 'react'
import axios from "axios"
import { useEffect } from "react"
import { useState } from "react"
export function Profile (){
const pathname = window.location.pathname
const[data,setData] = useState([])
const [loaded,hasloaded] = useState(false)
let username = pathname.split("/")[1]
useEffect(()=>{
axios.post('http://localhost:5000/profile/getProfile', {
"username":username
})
.then((res)=> setData(res.data))
})
return (
<div className='Wrapper'>
<img/>
{loaded ? <h2>{data[0].username}</h2>:<h2>Loading</h2>}
<img />
</div>
)
}
axios it taking like 10 seconds to get the response is this normal? when i request on postman it takes like 1 second. also how can i render when i have recieved the data without causing to many rerenders?
When the dependency array for useEffect is undefined (instead of an empty array) then the effect runs on every render. And within your useEffect you are updating state, which will trigger a re-render. This means every render triggers a re-render.
It looks like you only want the effect to run once, when the component first loads. For that, pass an empty dependency array to useEffect:
useEffect(()=>{
axios.post('http://localhost:5000/profile/getProfile', {
"username":username
})
.then((res)=> setData(res.data))
}, []); // <--- here