Why is useEffect from React not being called?

Question

I don't understand why my useEffect is not being called? I'm following a Youtube tutorial right now and all my code looks exactly the same as in the video. I was reading this: useEffect not being called and not updating state when api is fetched but I couldn't relate it to my problem so I was wondering if anyone could help me on this.

Thanks so much.

import { useSession } from "next-auth/react";
import { ChevronDownIcon } from "@heroicons/react/outline";
import { useEffect, useState } from "react";
import { shuffle } from "lodash";

const colors = [
  "from-indigo-500",
  "from-blue-500",
  "from-green-500",
  "from-red-500",
  "from-yellow-500",
  "from-pink-500",
  "from-purple-500",
];

function Center() {
  const { data: session } = useSession();
  const [color, setColor] = useState(null);

  useEffect(() => {
    console.log("useEffect called");
    setColor(shuffle(colors).pop());
  }, []);

  return (
    <div className="flex-grow">
      <header className="absolute top-5 right-8">
        <div className="flex items-center bg-red-300 space-x-3 opacity-90 hover:opacity-80 cursor-pointer rounded-full p-1 pr-2">
          <img
            className="rounded-full w-10 h-10"
            src={session?.user.image}
            alt=""
          />
          <h2>{session?.user.name}</h2>
          <ChevronDownIcon className="h-5 w-5" />
        </div>
      </header>

      <section
        className={
          "flex items-end space-x-7 bg-gradient-to-b to-black ${colors} h-80 text-white padding-8"
        }
      >
        <h1>hello</h1>
      </section>
    </div>
  );
}

export default Center;

MRE:

import { useEffect, useState } from "react";

const colors = [
  "from-indigo-500",
  "from-blue-500",
  "from-green-500",
  "from-red-500",
  "from-yellow-500",
  "from-pink-500",
  "from-purple-500",
];

function Center() {
  const [color, setColor] = useState(null);

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

  return (
    <div className="flex-grow">
      <section
        className={
          "flex items-end space-x-7 bg-gradient-to-b to-black ${colors} h-80 text-white padding-8"
        }
      >
      </section>
    </div>
  );
}

export default Center;

FINALLY SOLVED!!!

${colors} should've been ${color} and everything in className={} needs to be surrounded by `` not "". I originally thought useEffect() wasn't even been called because I was looking at VSCode terminal instead of chrome console.

It should be called. Is *useEffect called* not logged at all? Or are you expecting it to be called more than once? — Quentin, May 25 '22 at 18:45
Can you provide a [mcve]? (Your code as provided has a lot of dependencies which are quick time consuming to mock). — Quentin, May 25 '22 at 18:47
You are still depending on next-auth/react and heroicons/react/outline and lodash. — Quentin, May 25 '22 at 18:53
I had to hack it a bit to remove some errors with unused variables but https://codesandbox.io/s/react-playground-forked-542olz?file=/index.js runs and logs. I can't reproduce the problem. — Quentin, May 25 '22 at 19:00

score 2 · Answer 1 · answered May 25 '22 at 19:42

2

Maybe sounds obvious, but are you sure you didn't filter out your console log from chrome developer tools? The default shows info, warnings and errors but I often filter one and next time I open the console have to reset it.

answered May 25 '22 at 19:42

Michael James

21
1

OH MY GOD!!!! I never even checked the chrome console??? I was looking at the VSCode terminal which is where I do the npm run dev. I assumed that's where the console.log would be... I DO SEE useEffect called in the chrome terminal! So the problem is that the setColor() is not working? Basically what I'm trying to do is get a random color from colors every time I refresh the page. But every time I refresh, it is just black. I tried replacing ${colors} with let's say from-green-500 and it worked fine. So the problem must be setColor() in useEffect() right? Do you see an issue with it? – cs_student_311 May 25 '22 at 19:59
Probably worth adding as a comment instead of an answer – Hamish May 26 '22 at 00:21

Why is useEffect from React not being called?

1 Answers1