useRef examples

A ref is powerful. Because React makes things very reactive, if we want to either disable this reactiveness or add a tweak to it, the ref gives us the opportunity to do that. In this section, we'll look into more examples of how it can be used to solve interesting problems in React.

Clicking outside the menu

Say you have a component, and you 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:

Figure 8.5 – Click outside to dismiss

Let's say we have a Menu component displaying a list of menu items:

const Menu = () => {
  const [on, setOOn] = useState(true)
  if (!on) return null
  return (
    <ul>
      <li>Home</li>
      <li>Price&lt...