Why console.log() is logging 4 times and it's different?

Question

export default function course() {
  const router = useRouter()
  slu= router.asPath.split("/")[2]
  console.log(slu)
  return (<design goes here>);
}

So the problem here is that when I use this method it gives me this output

What I want is the value 1731547675 but instead of that it's giving me [slug] What's wrong that I am doing here

What is this `setslu(slu)= router.asPath.split("/")[2]`? Please show the real code, because this throws an error — Konrad, Dec 15 '22 at 19:28
Components in react rerender every time state changes hence that many console logs — Konrad, Dec 15 '22 at 19:30

score 1 · Answer 1 · answered Dec 15 '22 at 19:32

It Prints multiple times because the ui is refreshed everytime You set a state Wrap Your Console.log into a useEffect block

const [slu, setslu] = useState(0);
useEffect(()=>
  setslu(router.asPath.split("/")[2])
}

Hopefully this helps. Note: Use const instead of let in creating a state

Why console.log() is logging 4 times and it's different?

1 Answers1