Need help with react implementation of pwned and lazy loading

[U-4-E-A]

@MrWook ... I need your help.

export const getZXCVBN = async (password: string): Promise<any> => {
  const zxcvbnCommonPackage = await import('@zxcvbn-ts/language-common')
  const zxcvbnEnPackage = await import('@zxcvbn-ts/language-en')

  const options = {
    dictionary: {
      ...zxcvbnCommonPackage.default.dictionary,
      ...zxcvbnEnPackage.default.dictionary
    },
    graphs: zxcvbnCommonPackage.default.adjacencyGraphs,
    translations: zxcvbnEnPackage.default.translations
  }
  // @zxcvbn-ts/matcher-pwned needs zxcvbnOptions as the second parameter
  const matcherPwned = matcherPwnedFactory(fetch, zxcvbnOptions)
  zxcvbnOptions.addMatcher('pwned', matcherPwned)
  zxcvbnOptions.setOptions(options)

  return debounce(() => zxcvbnAsync(password), 2000, true)()
}

[....]

  useEffect(() => {
    const fetchZXCVBN = async (): Promise<void> => {
      const zxcvbnResult = await getZXCVBN(state.password)
      console.log(zxcvbnResult)
    }
    fetchZXCVBN()
  }, [state.password])

So I get 2 problems with this: -

The debounce timeout doesn't work at all, the function is invoked instantly on every key press.

I get the console message "Matcher already exists", which relates to the pwned matcher.

The official documentation does not have react examples and I cannot find any other examples online. What am I doing wrong here? Thanks.

References: -

https://zxcvbn-ts.github.io/zxcvbn/guide/examples/#debounce

https://zxcvbn-ts.github.io/zxcvbn/guide/lazy-loading/#webpack

[MrWook]

Hey, i don't have a react example because i never really used it.
But what i can tell is you doing it kind of wrong. useEffect should be triggered twice in dev mode. This means that you currently execute the addMatcher function twice too in dev mode.
All this configuration should be done above the react class. For example if you have this kind of react class which is from the documentation:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }
 handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

The configuration of zxcvbn should be above it.
As stated in the documentation https://zxcvbn-ts.github.io/zxcvbn/guide/examples/#debounce the debounce function callback should really be just a few lines where you get the input field value and execute zxcvbn.

As i understand from various react source on the internet you don't want to add a debounce function in useEffect because its triggered multiple times https://stackoverflow.com/questions/61785903/problems-with-debounce-in-useeffect
I hope i could help you a little bit and i think i will add an example for the various frontend libraries in the future