src/hooks/useTextInput.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import debounce from 'lodash-es/debounce';
import * as React from 'react';
import { RecoilState, useRecoilState } from 'recoil';

const { useCallback, useState, useMemo } = React;

export function useTextInut(
  x: RecoilState<string>
): [(e: React.ChangeEvent<HTMLInputElement>) => void, string] {
  const [, setTextGlobal] = useRecoilState(x);
  const [text, setText] = useState('');
  const setTextDebounced = useMemo(() => debounce(setTextGlobal, 300), [
    setTextGlobal,
  ]);
  const onChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setText(e.target.value);
      setTextDebounced(e.target.value);
    },
    [setTextDebounced]
  );
  return [onChange, text];
}