Preact usage in react-scan source code.

In this article, we analyze how Preact is used in react-scan source code. 

What is Preact?

Preact is a fast 3kB alternative to React with the same modern API. There is a Preact tutorial available. 

Preact’s Goals

Preact aims to deliver on a few key goals:

• Performance: Render quickly & efficiently

• Size: Small size, lightweight (approximately 3.5 kB)

• Efficiency: Effective memory usage (avoiding GC thrash)

• Understandability: Understanding the codebase should take no more than a few hours

• Compatibility: Preact aims to be largely compatible with the React API. preact/compat attempts to achieve as much compatibility with React as possible.

Read more about Preact goals and what features are intentionally omitted in Preact.

Now that we understand what Preact is, let’s see how this library is used in react-scan source code.

Preact import in react-scan source code

It looks like only the types, ComponentType and ReactNode, are imported in a file, packages/scan/src/core/index.ts. 

I did search for Preact in the react-scan codebase and it is used in a lot of other files too. Approximately in 38 files at the time of writing this article.

I did not stop my research here, I wanted to find out if react-scan used react at all because you see it as a dependency in its package.json

"devDependencies": {
    ...
    "react": "*",
    "react-dom": "*",
    "react-router": "^5.0.0"

But if you search carefully to find any imports from “react”, you will find nothing but one import in the react-scan package.

constants.ts is the only file where there’s an import from “react”.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

1. https://preactjs.com/

2. https://preactjs.com/about/project-goals/

3. https://github.com/aidenybai/react-scan/blob/main/packages/scan/src/core/index.ts#L9

4. https://github.com/aidenybai/react-scan/blob/main/packages/scan/src/core/index.ts#L10