Writing my first custom react hook - useOutsideClick
My first react custom hook in my first blog post
Command Palette
Search for a command to run...
Comments (5)
Join the discussionR
Rajat Kapoor5y ago
Thank you Chris. Glad you liked it
R
Rajat Kapoor5y ago
Thanks Rosius
C
Catalin Pit5y ago
Is this your first blog post? You write really well and you should keep them coming!
1
R
Rajat Kapoor5y ago
Hey Catalin! This means a lot coming from you.
Yes, this is my first post and I plan to continue writing as I learn. I have a blog series in mind where I will build my portfolio in public using next js and host it on vercel
1
D
Deactivated User5y ago
Hello !
"We want to listen to clicks on the whole document as soon as the component mounts or whenever the ref changes. We will do that using the useEffect hook".
You can't listen when a ref changes, it's no like a state. So you can remove "componentRef" from your deps ;)
1
R
Rajat Kapoor5y ago
Hey! Thank you for reading.
Having that ref in the useState dependencies ensure that things work when the element on which the ref is placed, unmounts and mounts.
Imagine a case where clicking on a button shows a sidebar and we want to close the sidebar when the user clicks outside of the sidebar(and not the button). In this case the ref would be undefined as first, but would change later. And we would want to register the onOutsideClick again, passing in the new ref.
Let me know if that doesn't make sense
D
Deactivated User5y ago
Hello Rajat ! As I said, you can't listen of a ref inside deps.
I invite you to test this code. When a ref change, the useEffect will not be executed.
Victor
1
R
Rajat Kapoor5y ago
Victor de la Fouchardière You are absolutely right here. Thanks for letting me know.
For others wondering, I created a codepen to test out what Victor told me. You can check that out here: https://codesandbox.io/s/vibrant-heisenberg-5bzrf?file=/src/App.js
S
Shad Mirza5y ago
Great read. I think you should check out Rooks Library for hooks. It contains a lot of great hooks for all the common cases.
Also, I wanna suggest that you use // for comments inside the code. It's more readable.
1
R
Rajat Kapoor5y ago
Thank you so much for the feedback.
I have updated the code comments to use // instead of #
R
Rajat Kapoor5y ago
rooks is amazing. I have been a big fan of both rooks and react-use.
I created this one just as a way to learn how to create custom react hooks
More from this blog
CSS Container Queries - The future of responsive web design is almost here
the future is closer than ever
May 25, 20216 min read2.7K
Create your dev portfolio - Part 1: First things first
"You can't build a great building on a weak foundation." — Gordon B. Hinckley
May 17, 20215 min read948
4 ways to perfectly center content using CSS
Centering content in CSS is something that beginners struggle a lot with. CSS provides a lot of options that allow you to center content inside a container. We'll try some of the most commonly used ones. Centering text Let's start by learning how to ...
May 14, 20212 min read808
