The ref in useIMask triggers renders multiple times

[npearson72]

Describe the bug Adding the ref to an input from the useIMask hook will cause the component to render 3 times. Admittedly I don't know what is happening within the iMask mounting process, but from a "React" perspective a ref is generally used to avoid triggering renders.

To Reproduce Using the following code will produce 3 renders when it's first loaded:

import { useIMask } from 'react-imask';

export const MyInput = () => {
  const { ref } = useIMask({
    mask: '000-`00-`0000',
    lazy: false
  });

  console.log('I am rendering....');

  return <input ref={ref} />;
};

Expected behavior I would expect the component to only render once.

Environment:

• OS: MacOS
• Browser: Chrome
• Version: 124.0.6367.119
• IMask version: react-imask: 7.6.0
• Framework/plugin version if used: React 18.3.1

[uNmAnNeR]

i debug it and i think it's not possible. renders are:

1. mount (ref is null)
2. init ref, apply mask
3. change internal state and external values (value/unmaskValue/typedValue)

I am not an expert in react so if you have any ideas let me know.