Functional Components & React Hooks

A. Functional Component is a basic building block in React that is written as a JavaScript function and returns UI elements using JSX. It is simple, reusable, and widely used in modern React development because it works well with hooks and keeps the code clean and organised.

Here, the entire OTP system is built as a single functional component, which handles everything from UI rendering to logic control.

The OTP workflow (including generation, input handling, verification, and UI updates) is managed inside this function.

When the user clicks the Send OTP button, a 4-digit OTP is generated and displayed in a browser alert, and the same component controls all subsequent interactions, such as filling in inputs and verifying.

B. React Hooks are special functions in React that allow functional components to use state and lifecycle features without converting them into class components. They help manage data, handle side effects, and interact with the DOM efficiently.

The project uses multiple hooks, such as useState, useRef, and useEffect. Here, useState stores values such as OTP digits, the timer, the loading state, and the verification status.

useRef helps control input focus movement between OTP fields and manages timer intervals.

useEffect watches the OTP inputs and automatically triggers verification once all 4 digits are filled, making the flow smooth and automatic after the OTP is generated and shown via alert pop-up.