Find Device Vendor by MAC Address MAC Address Lookup tool for network operations.

The tool works by utilizing a combination of regular expressions and string manipulation to normalize the input MAC address, extracting the Organizationally Unique Identifier (OUI) prefix from the first 6 hex digits. This process involves using the `replace` method with a regex pattern `/[^a-fA-F0-9]/g` to remove any non-hex characters from the input string, and then slicing the resulting string to extract the OUI prefix. The extracted OUI is then used as a key to query the local `ouiDatabase` object, which stores the mapping of OUIs to vendor names.

The `useMemo` hook from React is used to memoize the normalized MAC address, ensuring that it is only recalculated when the input changes. This optimization helps improve performance by reducing unnecessary computations. The `useCallback` hook is also used to memoize the `handleLookup` function, which handles the lookup logic and updates the component's state with the result.

The tool uses a Record data structure to store the OUI database, where each key is an OUI prefix and the value is the corresponding vendor name. This allows for efficient lookups using the bracket notation, as seen in the line `setVendor(ouiDatabase[normalizedMac] || null)`. The use of modern JavaScript features such as destructuring, arrow functions, and template literals also contributes to the tool's concise and readable codebase.

In terms of browser APIs, the tool relies on standard DOM events such as `keydown` and `click` to handle user interactions. It also uses the `useState` hook from React to manage the component's state, which includes the input value, vendor name, error message, and searched flag. The combination of these technologies enables a fast and efficient MAC address lookup experience that is both free and accurate.

The tool's mobile-first responsive design ensures that it works well on various devices and screen sizes, making it accessible to a wide range of users. By using ES6+ features and React hooks, the codebase remains concise and maintainable, with clear separation of concerns between different parts of the component. The use of type annotations and explicit type definitions also helps catch errors at compile-time, ensuring that the code is robust and reliable.