fix: memoized otp input and added example for using onOTPFilled

.changeset/empty-comics-breathe.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': major
+---
+
+fix(blade): memoized otp input

packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx

@@ -293,6 +293,40 @@ const OTPInputControlledTemplate: StoryFn<typeof OTPInputComponent> = () => {
 };
 export const OTPInputControlled = OTPInputControlledTemplate.bind({});
 
+export const onOtpFilled = (): React.ReactElement => {
+  return (
+    <Sandbox padding="spacing.0" editorHeight="100vh">
+      {` 
+      import React, { memo, useCallback, useState } from 'react';
+      import { OTPInput } from '@razorpay/blade/components';
+
+       function App() {
+         const [state, setState] = useState('');
+
+         // consider wrapping this function in useCallback.
+         // since this case we are updating state which will cause App to re-render and hence the function reference will change.
+         // which will cause the OTPInput to re-render. 
+         const sendOtpToServer = useCallback(({ value }) => {
+           setState(Math.random().toString());
+         }, []); // Dependency array ensures the function reference remains stable.
+
+         console.log(state);
+
+
+         return (
+           <>
+             <OTPInput label="Enter OTP" onOTPFilled={sendOtpToServer} />
+           </>
+         );
+       }
+
+       export default App;
+
+      `}
+    </Sandbox>
+  );
+};
+
 export const OTPInputRef: StoryFn<typeof OTPInputComponent> = () => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const [focusOn, setFocusOn] = React.useState(0);

packages/blade/src/components/Input/OTPInput/OTPInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useImperativeHandle, useState } from 'react';
+import React, { memo, useEffect, useImperativeHandle, useState } from 'react';
 import type { BaseInputProps } from '../BaseInput';
 import { BaseInput } from '../BaseInput';
 import { getHintType } from '../BaseInput/BaseInput';
@@ -419,7 +419,7 @@ const _OTPInput: React.ForwardRefRenderFunction<HTMLInputElement[], OTPInputProp
   );
 };
 
-const OTPInput = React.forwardRef<HTMLInputElement[], OTPInputProps>(_OTPInput);
+const OTPInput = memo(React.forwardRef<HTMLInputElement[], OTPInputProps>(_OTPInput));
 
 export type { OTPInputProps };
 export { OTPInput };