DEV Community

7 React Custom Hooks I Always Use as a Front-End Developer ๐Ÿš€

Joodi on January 17, 2025

Custom hooks are not just a convenience in Reactโ€”they're a game-changer for modular and maintainable code. They allow developers to encapsulate log...
Collapse
 
deathcrafter profile image
Shaktijeet Sahoo โ€ข

I'd prefer to use Tanstack Query over useFetch if I needed to improve performance because of the in-built caching.

Other than that, really useful hooks. Great read.

Collapse
 
joodi profile image
Joodi โ€ข โ€ข Edited

You're totally right! TanStack Query is great for better performance with its caching and extra features. But for simpler cases, a custom hook like useFetch works just fine. Glad you liked the hookโ€”thanks for the support! ๐Ÿ˜Š

Collapse
 
gracogen profile image
GRACE โ€ข โ€ข Edited

Hello Joodi. I'm Grace

I hope this doesn't sound intrusive.

I'm a newbie React Developer and I'm totally available for Volunteer work.

I'm ready to volunteer without a pay to improve on my skills.

Looking forward to hearing from you.

Thanks for the write up.

Collapse
 
brense profile image
Rense Bakker โ€ข

The return values from your custom hooks will create a new object or array value on each render, which means they will fail referential equality checks. This becomes a problem if you want to use the values returned from your custom hooks in a useEffect hook for example. The useEffect would be triggered on each render, even if the data returned from your custom hooks hasn't changed.

Collapse
 
joodi profile image
Joodi โ€ข

Thank you for the valuable feedback! Youโ€™re absolutely right. Returning new objects or arrays from custom hooks can lead to unnecessary re-renders, especially when used in ๐˜‚๐˜€๐—ฒ๐—˜๐—ณ๐—ณ๐—ฒ๐—ฐ๐˜ or other hooks that rely on referential equality.

Iโ€™ll update the article to include ๐˜‚๐˜€๐—ฒ๐— ๐—ฒ๐—บ๐—ผ to prevent unnecessary reference changes. This will ensure better performance by only updating the reference when the actual data changes. Thanks again for pointing this out! ๐Ÿ˜Š

Collapse
 
corey_koelewyn_b9d5b59a2a profile image
Corey K โ€ข

Lol this reply reads like sloppy ai

Thread Thread
 
joodi profile image
Joodi โ€ข

Thanks for the feedback! I can assure you this was written with careโ€”sometimes technical responses can come off as a bit formal. I appreciate your input and will keep it in mind to make my tone more natural in future replies.

Collapse
 
blakeneely profile image
Blake Neely โ€ข

These are wonderfully easy to read and simple to implement. I especially liked the useFetch hook. With returning data, loading and error it mimics Tanstack Query or Apollo Client with GraphQL but without all of the heavy liftingโ€”great for light weight use cases..

Collapse
 
joodi profile image
Joodi โ€ข

Yeah, I found it interesting too! It's a nice lightweight solution, especially for simpler use cases. ๐Ÿ˜Š

Collapse
 
ramdasrao profile image
ramdasrao โ€ข

Excellent. Perhaps there is a package with all these hooks?

Collapse
 
joodi profile image
Joodi โ€ข

Thank you! Glad you liked it! ๐Ÿ˜Š There isnโ€™t a package with all these hooks yet, but thatโ€™s a great ideaโ€”maybe itโ€™s time to create one! ๐Ÿš€

Collapse
 
ramdasrao profile image
ramdasrao โ€ข

Looking forward to it.

Collapse
 
emmy-akints profile image
Ayomide Emmanuel Akintan โ€ข โ€ข Edited

Wonderful stuff โœจ
Can't wait to begin implementing

Thank you โœจ
God bless you

Collapse
 
joodi profile image
Joodi โ€ข

Thank you so much! โœจ Hope it helps you outโ€”canโ€™t wait to see what you create! ๐Ÿ™Œ God bless you too! ๐Ÿ˜Š

Collapse
 
emmy-akints profile image
Ayomide Emmanuel Akintan โ€ข

Amen
You're welcome โœจ

Collapse
 
rksingh620 profile image
Rohit Kumar Singh โ€ข

Nice list

Collapse
 
joodi profile image
Joodi โ€ข

Thanks a lot! Happy you found it useful! ๐Ÿ˜Š

Collapse
 
pollabd profile image
Pollab โ€ข

Great work

Collapse
 
joodi profile image
Joodi โ€ข

Thanks a lot! Glad you liked it! ๐Ÿ˜Š

Collapse
 
huksley profile image
Ruslan Gainutdinov โ€ข

I like how simple and useful your useDebounce hook! For fetch I use SWR library which is tiny and supports many user cases.

Collapse
 
joodi profile image
Joodi โ€ข โ€ข Edited

Thank you! I'm glad you liked the simplicity of the ๐˜‚๐˜€๐—ฒ๐——๐—ฒ๐—ฏ๐—ผ๐˜‚๐—ป๐—ฐ๐—ฒ hook. SWR is an awesome libraryโ€”lightweight and packed with features. It's a great choice for handling fetches with caching and other advanced use cases! ๐Ÿš€

Collapse
 
eustachi0 profile image
Eustachio โ€ข

Very good! Thanks ๐Ÿ‘

Collapse
 
joodi profile image
Joodi โ€ข

Appreciate it, mate! Glad you liked it! ๐Ÿ‘๐Ÿ”ฅ

Collapse
 
wizard798 profile image
Wizard โ€ข

Very nice

Collapse
 
joodi profile image
Joodi โ€ข

Cheers, mate! Glad you liked it! ๐Ÿ˜Š

Collapse
 
pppdns profile image
Denes Papp โ€ข โ€ข Edited

thanks, these are really great

Collapse
 
joodi profile image
Joodi โ€ข

Thanks a lot! Glad you think so! ๐Ÿ˜Š

Collapse
 
_smit_ profile image
Smit Patel โ€ข

Nice one mate

Collapse
 
joodi profile image
Joodi โ€ข

Thanks, mate! Glad you liked it! ๐Ÿ™Œ

Collapse
 
nick_bbc453ec77736c92b084 profile image
Nick โ€ข

Shouldn't useMediaQuery utilize useLayoutEffect instead of useEffect so it gives the result before the browser paints the screen?

Collapse
 
joodi profile image
Joodi โ€ข

Thank you for pointing that out! Youโ€™re absolutely right that ๐˜‚๐˜€๐—ฒ๐—Ÿ๐—ฎ๐˜†๐—ผ๐˜‚๐˜๐—˜๐—ณ๐—ณ๐—ฒ๐—ฐ๐˜ could be more suitable for ๐˜‚๐˜€๐—ฒ๐— ๐—ฒ๐—ฑ๐—ถ๐—ฎ๐—ค๐˜‚๐—ฒ๐—ฟ๐˜† in cases where we want to ensure that the media query result is applied before the browser paints the screen. This would help avoid potential flickering or mismatched styles during the initial render.

However, in most cases where the result doesn't immediately affect the layout or cause visual changes, ๐˜‚๐˜€๐—ฒ๐—˜๐—ณ๐—ณ๐—ฒ๐—ฐ๐˜ can still work fine without noticeable issues. That said, for critical UI updates tied to media queries, I agree that switching to ๐˜‚๐˜€๐—ฒ๐—Ÿ๐—ฎ๐˜†๐—ผ๐˜‚๐˜๐—˜๐—ณ๐—ณ๐—ฒ๐—ฐ๐˜ would be the better choice for ensuring a smoother user experience.

Iโ€™ll consider updating the implementation to use ๐˜‚๐˜€๐—ฒ๐—Ÿ๐—ฎ๐˜†๐—ผ๐˜‚๐˜๐—˜๐—ณ๐—ณ๐—ฒ๐—ฐ๐˜ and highlight this distinction in the article. Thanks for the great suggestion! ๐Ÿ™Œ

Collapse
 
umairyojo profile image
Umair โ€ข

Very good info, it was interesting to know and read.

Collapse
 
joodi profile image
Joodi โ€ข

Thank you! Glad you found it interesting and helpful! ๐Ÿ˜Š