diff --git a/src/components/MaskedTextInput.test.tsx b/src/components/MaskedTextInput.test.tsx
index e0f7ff6..1cd1fe5 100644
--- a/src/components/MaskedTextInput.test.tsx
+++ b/src/components/MaskedTextInput.test.tsx
@@ -1,29 +1,34 @@
 import React from 'react'
-import { render, fireEvent, waitFor } from '@testing-library/react-native';
-import { MaskedTextInput } from './MaskedTextInput';
-import { Button, Keyboard, InputAccessoryView } from 'react-native';
-
+import { render, fireEvent, waitFor } from '@testing-library/react-native'
+import { MaskedTextInput } from './MaskedTextInput'
+import { Button, Keyboard, InputAccessoryView } from 'react-native'
 
 describe('<MaskedTextInput />', () => {
-  const mockedOnChangeText = jest.fn();
+  const mockedOnChangeText = jest.fn()
 
   test('should render correctly without a mask', () => {
     const container = render(
-      <MaskedTextInput value="with space and special* characters;" onChangeText={mockedOnChangeText} />,
-    );
-    expect(container).toMatchSnapshot();
+      <MaskedTextInput
+        value="with space and special* characters;"
+        onChangeText={mockedOnChangeText}
+      />
+    )
+    expect(container).toMatchSnapshot()
   })
 
   test('should preserve spaces in rawText when no mask is provided', async () => {
-    const onChangeTextMock = jest.fn();
+    const onChangeTextMock = jest.fn()
     const container = render(
       <MaskedTextInput
         onChangeText={onChangeTextMock}
         testID="masked-text-input"
       />
-    );
+    )
 
-    fireEvent.changeText(container.getByTestId('masked-text-input'), 'test test')
+    fireEvent.changeText(
+      container.getByTestId('masked-text-input'),
+      'test test'
+    )
 
     await waitFor(() => {
       expect(onChangeTextMock).toHaveBeenCalledWith('test test', 'test test')
@@ -31,14 +36,14 @@ describe('<MaskedTextInput />', () => {
   })
 
   test('should remove spaces in rawText when mask is provided', async () => {
-    const onChangeTextMock = jest.fn();
+    const onChangeTextMock = jest.fn()
     const container = render(
       <MaskedTextInput
         mask="AAA-999"
         onChangeText={onChangeTextMock}
         testID="masked-text-input"
       />
-    );
+    )
 
     fireEvent.changeText(container.getByTestId('masked-text-input'), 'ABC 123')
 
@@ -49,10 +54,10 @@ describe('<MaskedTextInput />', () => {
 
   test('should renders correctly with custom mask', () => {
     const container = render(
-      <MaskedTextInput mask="AAA-999" onChangeText={mockedOnChangeText} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
+      <MaskedTextInput mask="AAA-999" onChangeText={mockedOnChangeText} />
+    )
+    expect(container).toMatchSnapshot()
+  })
 
   test('should renders correctly with custom mask default value', () => {
     const container = render(
@@ -61,9 +66,9 @@ describe('<MaskedTextInput />', () => {
         onChangeText={mockedOnChangeText}
         defaultValue="ABC-123"
       />
-    );
+    )
     expect(container.getByDisplayValue('ABC-123')).toBeTruthy()
-  });
+  })
 
   test('should renders correctly with currency mask', () => {
     const container = render(
@@ -77,9 +82,9 @@ describe('<MaskedTextInput />', () => {
         }}
         onChangeText={mockedOnChangeText}
       />
-    );
-    expect(container).toMatchSnapshot();
-  });
+    )
+    expect(container).toMatchSnapshot()
+  })
 
   test('should mask input text with custom mask', async () => {
     const container = render(
@@ -88,14 +93,18 @@ describe('<MaskedTextInput />', () => {
         onChangeText={mockedOnChangeText}
         testID="masked-text-input"
       />
-    );
+    )
 
     fireEvent.changeText(container.getByTestId('masked-text-input'), 'RCT777')
 
     await waitFor(() => {
       expect(container.getByDisplayValue('RCT-777')).toBeTruthy()
     })
-  });
+
+    await waitFor(() => {
+      expect(mockedOnChangeText).toHaveBeenCalledWith('RCT-777', 'RCT777')
+    })
+  })
 
   test('should mask input text with currency mask', async () => {
     const container = render(
@@ -110,71 +119,87 @@ describe('<MaskedTextInput />', () => {
         onChangeText={mockedOnChangeText}
         testID="masked-text-input"
       />
-    );
+    )
 
     fireEvent.changeText(container.getByTestId('masked-text-input'), '5999')
 
     await waitFor(() => {
       expect(container.getByDisplayValue('$59.99')).toBeTruthy()
     })
-  });
+
+    await waitFor(() => {
+      expect(mockedOnChangeText).toHaveBeenCalledWith('$59.99', '5999')
+    })
+  })
+
+  test('should not call onChangeText on mount', () => {
+    const onChangeTextMock = jest.fn()
+    render(<MaskedTextInput mask="AAA-999" onChangeText={onChangeTextMock} />)
+    expect(onChangeTextMock).not.toHaveBeenCalled()
+  })
 
   test('should renders correctly with an accessory view', () => {
     const container = render(
-      <MaskedTextInput         
-      type="currency"
-      options={{
-        prefix: '$',
-        decimalSeparator: '.',
-        groupSeparator: ',',
-        precision: 2,
-      }} 
-      onChangeText={mockedOnChangeText} 
-      inputAccessoryViewID='Done'
-      inputAccessoryView={
-        <InputAccessoryView nativeID='Done'>
-        <Button
-          onPress={() => Keyboard.dismiss()}
-          title="Clear text"
-        />
-        </InputAccessoryView>
-      }
-      />,
-    );
-
-    const tree = container.toJSON();
-    expect(tree[0].props.inputAccessoryViewID).toBe('Done');
-    expect(tree[1].props.nativeID).toBe('Done');
-  });
+      <MaskedTextInput
+        type="currency"
+        options={{
+          prefix: '$',
+          decimalSeparator: '.',
+          groupSeparator: ',',
+          precision: 2,
+        }}
+        onChangeText={mockedOnChangeText}
+        inputAccessoryViewID="Done"
+        inputAccessoryView={
+          <InputAccessoryView nativeID="Done">
+            <Button onPress={() => Keyboard.dismiss()} title="Clear text" />
+          </InputAccessoryView>
+        }
+      />
+    )
+
+    const tree = container.toJSON()
+    expect(tree[0].props.inputAccessoryViewID).toBe('Done')
+    expect(tree[1].props.nativeID).toBe('Done')
+  })
   test('should be bold when the textBold attribute is added', () => {
-    const container  =
-    render(<MaskedTextInput 
-      testID="masked-text-input" 
-      onChangeText={mockedOnChangeText} 
-      textBold 
-      mask="99/99/9999"
-      />)
-      expect(container.getByTestId('masked-text-input')).toHaveStyle({fontWeight: 'bold' });
-    });
-    test('should be italic when the textItalic attribute is added', () => {
-      const container  =
-      render(<MaskedTextInput 
-        testID="masked-text-input" 
-        onChangeText={mockedOnChangeText} 
-        textItalic 
+    const container = render(
+      <MaskedTextInput
+        testID="masked-text-input"
+        onChangeText={mockedOnChangeText}
+        textBold
         mask="99/99/9999"
-        />)
-        expect(container.getByTestId('masked-text-input')).toHaveStyle({fontStyle: 'italic' });
-    });
-    test('should be the line style added to the text when the textDecoration attribute has a non-null value', () => {
-      const textDecorationLine = 'underline'
-      const container  =
-      render(<MaskedTextInput
-        testID="masked-text-input" 
-        onChangeText={mockedOnChangeText} 
-        textDecoration={textDecorationLine} 
+      />
+    )
+    expect(container.getByTestId('masked-text-input')).toHaveStyle({
+      fontWeight: 'bold',
+    })
+  })
+  test('should be italic when the textItalic attribute is added', () => {
+    const container = render(
+      <MaskedTextInput
+        testID="masked-text-input"
+        onChangeText={mockedOnChangeText}
+        textItalic
+        mask="99/99/9999"
+      />
+    )
+    expect(container.getByTestId('masked-text-input')).toHaveStyle({
+      fontStyle: 'italic',
+    })
+  })
+  test('should be the line style added to the text when the textDecoration attribute has a non-null value', () => {
+    const textDecorationLine = 'underline'
+    const container = render(
+      <MaskedTextInput
+        testID="masked-text-input"
+        onChangeText={mockedOnChangeText}
+        textDecoration={textDecorationLine}
         mask="99/99/9999"
-        />)
-        expect(container.getByTestId('masked-text-input')).toHaveStyle({textDecorationLine: textDecorationLine });
-    });  
-});
+      />
+    )
+    expect(container.getByTestId('masked-text-input')).toHaveStyle({
+      textDecorationLine: textDecorationLine,
+    })
+  })
+})
diff --git a/src/components/MaskedTextInput.tsx b/src/components/MaskedTextInput.tsx
index 8a0984b..9b042bd 100644
--- a/src/components/MaskedTextInput.tsx
+++ b/src/components/MaskedTextInput.tsx
@@ -1,13 +1,18 @@
 import React, {
   useEffect,
   useState,
+  useRef,
   forwardRef,
   ForwardRefRenderFunction,
 } from 'react'
 import { TextInput, TextInputProps } from 'react-native'
 import { mask, unMask } from '../utils/mask'
-import type { FormatType, MaskOptions, StyleObj, TextDecorationOptions } from 'src/@types'
-
+import type {
+  FormatType,
+  MaskOptions,
+  StyleObj,
+  TextDecorationOptions,
+} from 'src/@types'
 
 type TIProps = Omit<TextInputProps, 'onChangeText'>
 export interface MaskedTextInputProps extends TIProps {
@@ -18,8 +23,8 @@ export interface MaskedTextInputProps extends TIProps {
   onChangeText: (text: string, rawText: string) => void
   inputAccessoryView?: JSX.Element
   textBold?: boolean
-  textItalic?:boolean
-  textDecoration?:TextDecorationOptions
+  textItalic?: boolean
+  textDecoration?: TextDecorationOptions
   style?: StyleObj
 }
 
@@ -48,37 +53,39 @@ export const MaskedTextInputComponent: ForwardRefRenderFunction<
     {
       fontWeight: textBold && 'bold',
       fontStyle: textItalic && 'italic',
-      textDecorationLine: textDecoration
+      textDecorationLine: textDecoration,
     },
-    style
+    style,
   ]
-  
+
   const isMasked = () => pattern || type === 'currency'
-  
+
   const getMaskedValue = (value: string) =>
     mask(value, pattern, type, options, autoCapitalize)
-  
+
   const getUnMaskedValue = (value: string) =>
     unMask(value, type as 'custom' | 'currency')
 
   const updateStatesWithMasking = (inputValue: string) => {
     const newUnMaskedValue = getUnMaskedValue(inputValue)
     const newMaskedValue = getMaskedValue(newUnMaskedValue)
-    
+
     setMaskedValue(newMaskedValue)
-    setUnmaskedValue(newUnMaskedValue)
     setRawValue(inputValue)
+    latestValuesRef.current = {
+      masked: newMaskedValue,
+      unMasked: newUnMaskedValue,
+      raw: inputValue,
+    }
   }
 
   const updateStatesWithoutMasking = (inputValue: string) => {
     setMaskedValue(inputValue)
-    setUnmaskedValue(inputValue)
     setRawValue(inputValue)
   }
 
   const clearAllStates = () => {
     setMaskedValue('')
-    setUnmaskedValue('')
     setRawValue('')
   }
 
@@ -87,54 +94,105 @@ export const MaskedTextInputComponent: ForwardRefRenderFunction<
   const initialRawValue = value
 
   const initialMaskedValue = isMasked()
-    ? getMaskedValue(type === 'currency' ? defaultValueCurrency : defaultValueCustom)
-    : (value || defaultValueCustom)
+    ? getMaskedValue(
+        type === 'currency' ? defaultValueCurrency : defaultValueCustom
+      )
+    : value || defaultValueCustom
 
   const initialUnMaskedValue = isMasked()
-    ? getUnMaskedValue(type === 'currency' ? defaultValueCurrency : defaultValueCustom)
-    : (value || defaultValueCustom)
+    ? getUnMaskedValue(
+        type === 'currency' ? defaultValueCurrency : defaultValueCustom
+      )
+    : value || defaultValueCustom
 
   const [maskedValue, setMaskedValue] = useState(initialMaskedValue)
-  const [unMaskedValue, setUnmaskedValue] = useState(initialUnMaskedValue)
   const [rawValue, setRawValue] = useState(initialRawValue)
-  const [isInitialRender, setIsInitialRender] = useState(true)
+  const rafHandleRef = useRef<number | null>(null)
+  const timeoutHandleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const latestValuesRef = useRef<{
+    masked: string
+    unMasked: string
+    raw: string | undefined
+  }>({
+    masked: initialMaskedValue,
+    unMasked: initialUnMaskedValue,
+    raw: initialRawValue,
+  })
 
   const actualValue = isMasked() ? maskedValue : rawValue
 
-
   const handleChange = (inputValue: string) => {
+    if (
+      rafHandleRef.current != null &&
+      typeof cancelAnimationFrame === 'function'
+    ) {
+      cancelAnimationFrame(rafHandleRef.current)
+      rafHandleRef.current = null
+    }
+    if (timeoutHandleRef.current != null) {
+      clearTimeout(timeoutHandleRef.current)
+      timeoutHandleRef.current = null
+    }
+
     if (isMasked()) {
       updateStatesWithMasking(inputValue)
     } else {
       updateStatesWithoutMasking(inputValue)
+      latestValuesRef.current = {
+        masked: inputValue,
+        unMasked: inputValue,
+        raw: inputValue,
+      }
     }
-  }
 
-  useEffect(() => {
-    if (isInitialRender) {
-      setIsInitialRender(false)
-      return
+    const emit = () => {
+      const { masked, unMasked, raw } = latestValuesRef.current
+      if (isMasked()) {
+        onChangeText(masked, unMasked)
+      } else {
+        onChangeText(raw || '', raw || '')
+      }
     }
 
-    if (isMasked()) {
-      onChangeText(maskedValue, unMaskedValue)
+    if (typeof requestAnimationFrame === 'function') {
+      rafHandleRef.current = requestAnimationFrame(() => {
+        rafHandleRef.current = null
+        emit()
+      })
     } else {
-      onChangeText(rawValue || '', rawValue || '')
+      timeoutHandleRef.current = setTimeout(() => {
+        timeoutHandleRef.current = null
+        emit()
+      }, 0)
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      if (
+        rafHandleRef.current != null &&
+        typeof cancelAnimationFrame === 'function'
+      ) {
+        cancelAnimationFrame(rafHandleRef.current)
+        rafHandleRef.current = null
+      }
+      if (timeoutHandleRef.current != null) {
+        clearTimeout(timeoutHandleRef.current)
+        timeoutHandleRef.current = null
+      }
     }
-  }, [maskedValue, unMaskedValue, rawValue])
+  }, [])
 
   useEffect(() => {
     if (value) {
       if (isMasked()) {
         setMaskedValue(getMaskedValue(value))
-        setUnmaskedValue(getUnMaskedValue(value))
       } else {
         updateStatesWithoutMasking(value)
       }
     } else {
       if (isMasked()) {
         setMaskedValue(initialMaskedValue)
-        setUnmaskedValue(initialUnMaskedValue)
       } else {
         clearAllStates()
       }