Typescript and useRef hook causing type error

Question

I made a custom Checkbox component to handle events differently, code below:

const DoubleClickCheckbox = ({ filter, handleDoubleClick, handleSingleClick }: DCCheckboxProps) => {
  const delay = 400;
  const timer = useRef(null);

  const classes = useStyles();
  const flags = useFlags();

  useEffect(() => {
    return () => {
      timer.current && clearTimeout(timer.current);
    };
  }, []);

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const onClick = (e) => {
    if (flags.csRequireFilters) {
      e.stopPropagation();
      handleSingleClick(filter);
      return;
    }

    switch (e.detail) {
      case 1:
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        timer.current = setTimeout(() => {
          handleSingleClick(filter);
        }, delay);
        break;
      case 2:
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        clearTimeout(timer.current);
        handleDoubleClick(filter);
        break;
      default:
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        clearTimeout(timer.current);
        return;
    }
  };

  return (
    <div className={classes.filter} onClick={onClick} onKeyDown={() => {}} role="button" tabIndex={0}>
      <Checkbox
        label={filter.label}
        className={classes.checkbox_custom}
        checked={filter.selected}
        checkedIcon={filter.mandatory ? <Icons.CheckboxDoubleClick /> : <Icons.CheckboxSingleClick />}
      />
    </div>
  );
};

I would like to dump my eslint-disable-next-line @typescript-eslint/ban-ts-comment and ts-ignore.

If I rewrite my code it reads as below, I get a typescript error:

  case 1:
    timer.current = setTimeout(() => {
      handleSingleClick(filter);
    }, delay);
    break;

The error is: Type 'Timeout' is not assignable to type 'null'. I have tried various other tricks, for example: const timer = useRef<React.MutableRefObject<ReturnType<typeof setTimeout>>>(null);.

It did not help either.

Please advise

what exactly are you trying to achieve with this timer ref? i'm not following. can you explain what the use case you're trying to implement? seems like ref might not necessarily be the solution. — Szaman
– Szaman, Commented Feb 8, 2022 at 19:29
setTimeout returns a number that represents an id of that timer. You can use either number type or NodeJS.Timeout alongside with null. — n1md7
– n1md7, Commented Feb 8, 2022 at 19:39

CD.. · Accepted Answer · 2022-02-08 19:33:01Z

1

Seems like you'r ref can be null or be a number (ReturnType<typeof setTimeout> is number):

const timer = React.useRef<number | null>(null)

answered Feb 8, 2022 at 19:33

CD..

74.4k25 gold badges160 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chromaloop · Accepted Answer · 2022-02-08 19:28:58Z

0

I think the problem is the useRef(null) implicitly sets it's type as null. You should define it as const timer = useRef<null | () => void>(null)

answered Feb 8, 2022 at 19:28

chromaloop

2225 silver badges11 bronze badges

Collectives™ on Stack Overflow

Typescript and useRef hook causing type error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related