Global Event Handling and Interactive UI

Learn about how useRef proves beneficial for scenarios requiring precise control over DOM elements and addressing potential issues.

We'll cover the following

Reactivity with refs

A ref is powerful. Because React makes things very reactiveThe ability to automatically update and re-render components in response to changes in data or state., if we want to either disable this reactiveness or add a tweak to it, the ref gives us the opportunity to do that. We'll look into more examples of how it can be used to solve interesting problems in React.

Clicking outside the menu

Say we have a component, and we want to know when the user clicks outside of it. This is a very popular feature for a popup menu or a modal. Once the menu is visible, we want to dismiss it when the user clicks anywhere outside of it:

Get hands-on with 1400+ tech skills courses.