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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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! ๐
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.
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.
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! ๐
Lol this reply reads like sloppy ai
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.
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..
Yeah, I found it interesting too! It's a nice lightweight solution, especially for simpler use cases. ๐
Excellent. Perhaps there is a package with all these hooks?
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! ๐
Looking forward to it.
Wonderful stuff โจ
Can't wait to begin implementing
Thank you โจ
God bless you
Thank you so much! โจ Hope it helps you outโcanโt wait to see what you create! ๐ God bless you too! ๐
Amen
You're welcome โจ
Nice list
Thanks a lot! Happy you found it useful! ๐
Great work
Thanks a lot! Glad you liked it! ๐
I like how simple and useful your useDebounce hook! For fetch I use SWR library which is tiny and supports many user cases.
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! ๐
Very good! Thanks ๐
Appreciate it, mate! Glad you liked it! ๐๐ฅ
Very nice
Cheers, mate! Glad you liked it! ๐
thanks, these are really great
Thanks a lot! Glad you think so! ๐
Nice one mate
Thanks, mate! Glad you liked it! ๐
Shouldn't useMediaQuery utilize useLayoutEffect instead of useEffect so it gives the result before the browser paints the screen?
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! ๐
Very good info, it was interesting to know and read.
Thank you! Glad you found it interesting and helpful! ๐