Problems with debounce in useEffect

Every time your component re-renders, a new debounced verify function is created, which means that inside useEffect you are actually calling different functions which defeats the purpose of debouncing.

It's like you were doing something like this:

const debounced1 = debounce(() => { console.log(state.username) }, 1000);
debounced1();

const debounced2 = debounce(() => { console.log(state.username) }, 1000);
debounced2();

const debounced3 = debounce(() => { console.log(state.username) }, 1000);
debounced3();

as opposed to what you really want:

const debounced = debounce(() => { console.log(state.username) }, 1000);
debounced();
debounced();
debounced();

One way to solve this is to use useCallback which will always return the same callback (when you pass in an empty array as a second argument). Also, I would pass the username to this function instead of accessing the state inside (otherwise you will be accessing a stale state):

import { useCallback } from "react";
const App => () {
  const [username, setUsername] = useState("");

  useEffect(() => {
    if (username !== "") {
      verify(username);
    }
  }, [username]);

  const verify = useCallback(
    debounce(name => {
      console.log(name);
    }, 200),
    []
  );

  return <input onChange={e => setUsername(e.target.value)} />;
}

Also you need to slightly update your debounce function since it's not passing arguments correctly to the debounced function.

function debounce(func, wait, immediate) {
  var timeout;

  return (...args) => { <--- needs to use this `args` instead of the ones belonging to the enclosing scope
    var context = this;
...

demo

Note: You will see an ESLint warning about how useCallback expects an inline function, you can get around this by using useMemo knowing that useCallback(fn, deps) is equivalent to useMemo(() => fn, deps):

const verify = useMemo(
  () => debounce(name => {
    console.log(name);
  }, 200),
  []
);

export function useLazyEffect(effect: EffectCallback, deps: DependencyList = [], wait = 300) {
  const cleanUp = useRef<void | (() => void)>();
  const effectRef = useRef<EffectCallback>();
  const updatedEffect = useCallback(effect, deps);
  effectRef.current = updatedEffect;
  const lazyEffect = useCallback(
    _.debounce(() => {
      cleanUp.current = effectRef.current?.();
    }, wait),
    [],
  );
  useEffect(lazyEffect, deps);
  useEffect(() => {
    return () => {
      cleanUp.current instanceof Function ? cleanUp.current() : undefined;
    };
  }, []);
}

I suggest a few changes.

1) Every time you make a state change, you trigger a render. Every render has its own props and effects. So your useEffect is generating a new debounce function every time you update username. This is a good case for useCallback hooks to keep the function instance the same between renders, or possibly useRef maybe - I stick with useCallback myself.

2) I would separate out individual handlers instead of using useEffect to trigger your debounce - you end up with having a long list of dependencies as your component grows and it's not the best place for this.

3) Your debounce function doesn't deal with params. (I replaced with lodash.debouce, but you can debug your implementation)

4) I think you still want to update the state on keypress, but only run your denounced function every x secs

Example:

import React, { useState, useCallback } from "react";
import "./styles.css";
import debounce from "lodash.debounce";

export default function App() {
  const [username, setUsername] = useState('');

  const verify = useCallback(
    debounce(username => {
      console.log(`processing ${username}`);
    }, 1000),
    []
  );

  const handleUsernameChange = event => {
    setUsername(event.target.value);
    verify(event.target.value);
  };

  return (
    <div className="App">
      <h1>Debounce</h1>
      <input type="text" value={username} onChange={handleUsernameChange} />
    </div>
  );
}

DEMO

I highly recommend reading this great post on useEffect and hooks.