How to console log react UseEffect in a function

Question

I've been trying to console.log this code to print "reviewer" however it's not showing up. I have it in a functional component. What could be wrong? I'm getting "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:"

const testfc = () => {
  console.log('tesing testing 123') //only this line prints

  const [currentRole, setCurrentRole] = React.useState('reviewer')
  React.useEffect(() => console.log(currentRole), [currentRole])

  return <></>
}
testfc()

I fixed the return but still getting an error. The same one.

`testfc` is not a component. https://stackoverflow.com/questions/70751001/what-is-the-difference-between-function-and-functional-react-component — evolutionxbox, Sep 13 '22 at 00:11
yea, I just realized i'm missing a return. Not sure what I want to return though. I just want to log 'reviewer'. — Colorful Codes, Sep 13 '22 at 00:14
Why is it a component if it does not return? You could return `<>>` (a react fragment)? — evolutionxbox, Sep 13 '22 at 00:16
@evolutionxbox yea, that slipped my mind. I'm still getting the same error. Does it look like i'm calling it correctly? — Colorful Codes, Sep 13 '22 at 00:19

score 0 · Answer 1 · answered Sep 13 '22 at 00:20

0

First your component is not a component as @evolutionxbox pointed out.

To achieve your desired results you could do something like this:

  const testfc = () => {
    const [currentRole, setCurrentRole] = React.useState('reviewer')

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

    return (
     <></>
    );
};

export default testfc;

answered Sep 13 '22 at 00:20

Chris

1,091
11
32

The real question is why you would want to do that, but I respect that I don't know all the details. – Chris Sep 13 '22 at 00:20

How to console log react UseEffect in a function

1 Answers1