Annotating Custom React Hook With TypeScript

Question

I have a custom React Hook that watches for a click outside of a specific element. It works just fine, but I am having trouble making TypeScript happy in a few places.

App.js

import { useRef, useCallback } from "react";
import useClick from "./useClick";

export default function App() {
  const asideRef = useRef(null);

  const handleStuff = useCallback(() => {
    console.log("a click outside of the sidebar occurred.");
  }, []);

  useClick(asideRef, handleStuff);

  return (
    <div className="App">
      <aside ref={asideRef}>
        <nav>
          <ul></ul>
        </nav>
      </aside>
    </div>
  );
}

useClick.js

import React, { useEffect } from "react";

const useClick = (ref: React.MutableRefObject<HTMLElement>, cb: () => void) => {
  useEffect(() => {
    const checkClick = (e: React.MouseEvent): void => {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        cb();
      }
    };

    document.addEventListener("click", checkClick);

    return () => {
      document.removeEventListener("click", checkClick);
    };
  }, [ref, cb]);
};

export default useClick;

The first problem area is in App.js, where the useClick hook is called. TypeScript complains about the first parameter passed to useClick and gives a message of:

Argument of type 'MutableRefObject<null>' is not assignable to parameter of type 'MutableRefObject<HTMLElement>'.
  Type 'null' is not assignable to type 'HTMLElement'.ts(2345)

I know this has something to do with me setting the initial value of the ref to null, and the argument for the ref in useClick being annotated as React.MutableRefObject<HTMLElement>. I just don't know how to fix it.

The second problem area is in useClick.js, where the event listeners are added and removed. TypeScript seems to have a problem with my checkClick function. The error is so long that I have no choice but to show a photo of it below.

If anyone has any idea's on how to fix these two issues, so TypeScript will be happy, the help would be greatly appreciated.

Hi, this is very nicely documented, but do you mind reposting this as two separate questions with specific error information in the titles? "Omnibus" posts to help with various problems in your program are not allowed here, and I flagged this question for closure for that reason. — Noah
– Noah, Commented Oct 24, 2021 at 17:50
@Noah It does seem that way, but the problems involved are actually related. — jsejcksn
– jsejcksn, Commented Oct 24, 2021 at 17:53
17.0.2 Here's a codesandbox where you can actually see the errors yourself. codesandbox.io/s/mystifying-meitner-34mn7 — Dan Zuzevich
– Dan Zuzevich, Commented Oct 24, 2021 at 18:24

jsejcksn · Accepted Answer · 2021-10-24 18:32:53Z

Hi Dan: I'll start with what needs to change, then explain why below. (I also renamed your TypeScript file extensions to reflect their content.)

useClick.ts

Before:

// ...
const useClick = (ref: React.MutableRefObject<HTMLElement>, cb: () => void) => {
  useEffect(() => {
    const checkClick = (e: React.MouseEvent): void => {
// ...

After:

// ...
const useClick = (ref: React.RefObject<HTMLElement>, cb: () => void) => {
  useEffect(() => {
    const checkClick = (e: MouseEvent): void => {
// ...

App.tsx

Before:

export default function App() {
  const asideRef = useRef(null);

After:

export default function App() {
  const asideRef = useRef<HTMLElement>(null);

First, let's address the checkClick function: This function signature should be assignable to the EventListener type in lib.dom.d.ts:

interface EventListener {
    (evt: Event): void;
}

Because your parameter is React.MouseEvent, which does not extend the native Event, type, it is incompatible. Just use the native MouseEvent type instead, since you're adding the listener to the document (which has nothing to do with React anyway.)

Next, let's look at the function signature for useClick:

You might want to reference the type definitions for useRef while reading this part:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/5149827c1f97541dd69d950039b83ace68e119e6/types/react/index.d.ts#L1025-L1063

The first parameter is the only one that needs to change, and it needs to change from a MutableRefObject to a RefObject. The difference between these can be subtle, but there are some great resources you can read to learn more about them. Here's one, for example:

https://dev.to/wojciechmatuszewski/mutable-and-immutable-useref-semantics-with-react-typescript-30c9

When creating a ref that you pass to React to use for an element reference, you should provide null as the initial argument to useRef (which you did) and also provide a generic type annotation for the type of value it should hold (in this case it's HTMLElement). When using a ref for a DOM element, React expects that you will never mutate this ref since it's being controlled by React, so the type that is returned by useRef in this case is simply a RefObject. Therefore, that's what you should use for the first parameter of useClick.

Collectives™ on Stack Overflow

Annotating Custom React Hook With TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related