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:

Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read

How to use AI to build accurate ShadCN components

AI agents often break shadcn/ui components with outdated docs or made-up props. The MCP server fixes this by giving live access to registries. In this tutorial, we’ll set it up and build a Kanban board to show it in action.

Chizaram Ken
Oct 3, 2025 ⋅ 5 min read
Rust Project for Web Services LogRocket Article

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

Jude Miracle
Oct 2, 2025 ⋅ 2 min read
andrew evans headshot

A spec-first workflow for building with agentic AI

Andrew Evans gives his take on agentic AI and walks through a step-by-step method to build a spec-first workflow using Claude Code.

Andrew Evans
Oct 1, 2025 ⋅ 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