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:

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 â‹… 9 min read
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 â‹… 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 â‹… 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 â‹… 10 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