DEV Community 👩‍💻👨‍💻

Baraa Baba
Baraa Baba

Posted on

It took me two hours to fix a really simple problem

I was working on my portfilio when an error happened about invalid hook calls I tried everything that the error said from trying to check if I am using hooks properly and making sure I don't have two different versions of react also for some reason I tried not to import my components dynamically apparently the error was just I deleted const Card =useRef() but kept the ref in the jsx and that was it I just have to delete ref={Card} I feel so stupid lol

my thoughts:

it's partially my fault cause I didn't think right since I already used hooks before without any problem so I had to know that the problem was from the Card and somewhat also react fault
idk tell what you think about this in the comments

Top comments (3)

Collapse
sfleroy profile image
Leroy

This is exactly where typescript and a good ide can save the day! But without.. We've all had one of those days at some point :) learn from it and move on ^_^

Collapse
lukeshiru profile image
Luke Shiru

I'm a TS fan, but you don't need TS for this, you just need to have stricter JS settings. You can have a jsconfig.json in the root of your project with strict set to true, and it should catch this kind of thins even in plain JS.

Collapse
baraa_baba profile image
Baraa Baba Author

You are right cause I think the ide should have warned me that I have a ref that was not defined.

🌚 Turn on dark mode

🔠 Change your default font

📚 Adjust your experience level to see more relevant content

 

Head to your account's Settings to do all this and more.