2021-09-24
1730
#react
Shalitha Suranga
67554
Sep 24, 2021 ⋅ 6 min read

How to detect a click outside a React component

Shalitha Suranga Programmer | Author of Neutralino.js | Technical Writer

Recent posts:

Exploring Hurl An Alternative To Postman

Exploring Hurl, a command line alternative to Postman

Hurl is an excellent Postman alternative that improves the DX of working with APIs through the command line.

Nwani Victory
May 20, 2024 ⋅ 8 min read
How To Integrate WunderGraph With Your Frontend Application

How to integrate WunderGraph with your frontend application

Unify and simplify APIs using WunderGraph to integrate REST, GraphQL, and databases in a single endpoint.

Boemo Mmopelwa
May 17, 2024 ⋅ 5 min read
Understanding The Latest Webkit Features In Safari 17.4

Understanding the latest Webkit features in Safari 17.4

The Safari 17.4 update brought in many modern features and bug fixes. Explore the major development-specific updates you should be aware of.

Rahul Chhodde
May 16, 2024 ⋅ 10 min read
Using Webrtc To Implement Peer To Peer Video Streaming In A Node Js Project

Using WebRTC to implement P2P video streaming

Explore one of WebRTC’s major use cases in this step-by-step tutorial: live peer-to-peer audio and video streaming between systems.

Oduah Chigozie
May 16, 2024 ⋅ 18 min read
View all posts

4 Replies to "How to detect a click outside a React component"

  1. Be careful.
    The first example using useEffect without dependencies array (it should be [handleClickOutside] or []) will be called on each render.
    The second one using class is wrong, .bind(this) creates a new reference and the listener will never be removed on componentWillUnmount.
    Use fat arrow function or binding on constructor, but never use .bind for events listeners !

    1. Thank you very much for these great suggestions. I updated code with binding in constructor. Also, I improved the hook-based example code by destructing props and putting handleClickOutside into useEffect as recommended in React Hooks FAQ docs.

  2. Is there a way to make it so the tooltip disappears when you click on either button or the component after already clicking it

Leave a Reply