# Omlet vs. React Scanner

Before Omlet was around, the most common way developers would analyze component usage was to use React Scanner. Let's look at how is Omlet different.

## Component detection

### In React Scanner, components with zero usages and Components used out of JSX expressions are not detected 

For example, the usage of **`UserProfile`** and **`CompanyProfile`** components in the **`Profile`** are not detected by react-scanner. Instead, it reports the usage of a component called **`Component`**, which is the intermediary variable used for selecting the right profile component in this component.

{% code lineNumbers="true" %}

```javascript
function Profile({ accountType }) {
  const components = {
    userProfile: UserProfile,
    companyProfile: CompanyProfile
  };

  const Component = components[accountType]

  return (
    <>
      ...
      <Component>...</Component>
    </>
  );
}
```

{% endcode %}

### **Dependencies among components defined in the same module are not detected**

Dependency between **`NamedComponentWrapped`** and **`ComponentUsingNamedWrappedComponent`** is missing in react-scanner results.

```javascript
export function ComponentUsingNamedWrappedComponent() {
    return <NamedComponentWrapped/>;
}
export function NamedComponentWrapped() {
    return <div></div>;
}
```

### **Usages are reported at the file level, so dependencies of components defined in the same module are not visible**

If you use use the below code as an example:

{% code title="navigation.jsx" lineNumbers="true" %}

```javascript
import { Button, Input } from "./components";

export function Footer() {
    return <div>
        <Button/>
    </div>;
}

export function Header() {
    return <div>
        <h1>Hello</h1>
        <Input/>
    </div>;
}
```

{% endcode %}

react-scanner's usage detection result will be:

* Button in components/navigation.jsx
* Input in components/navigation.jsx

whereas Omlet will report the following:

* Footer uses Button
* Header uses Input

## Import resolution

### **react-scanner does not follow exports to find the source component for imports.**

Instead, it detects names imported from modules. This causes duplicate components and incorrect usage numbers. For example if we use the below example…This results in 4 separate button components in react-scanner data since each of them has distinct import name and import path combinations:&#x20;

* Button from components/Button
* Button from components/Button/Button
* SameButton from components/Button
* TheButton from components/Button

In react-scanners report, each combination has their separate usage counts where Omlet detects that they’re actually the same component and gives the total (correct) number of usages.

```javascript
// file: components/Button/Button.jsx
export function Button() { .. }

// file: components/Button/index.jsx
import { Button } from "./Button";
export { Button };
export default Button;

// file app/pageA.jsx
import { Button } from "../components/Button";

// file app/pageB.jsx
import { Button } from "../components/Button/Button";

// file app/pageC.jsx
import SameButton from "../components/Button";

// file app/pageC.jsx
import TheButton from "../components/Button";
```

## Alias resolution

Aliased imports appear as separate components in react-scanner reports. Similar to the case mentioned under the Import resolution section, this causes fragmented usage counts and duplicate entries.

```javascript
// file: frontend/src/layout/navigation/TopBar/SitePopover.tsx
import { ProfilePicture } from 'lib/lemon-ui/ProfilePicture'

// file: frontend/src/lib/lemon-ui/LemonTable/columnUtils.tsx
import { ProfilePicture } from '../ProfilePicture'
```

## Missing in Omlet

* HTML tags in JSX are not detected: Omlet doesn’t detect React element equivalent of HTML tags such as div, img, etc.&#x20;
* Instance counts: Omlet doesn't count component instances. Instead, it reports unique parent components for each component. react-scanner reports each instance separately.

<br>