How Long Does The Preact Take

How long does Preact take? Depends entirely on what you're trying to do.

If you're asking how long it takes to learn* Preact — maybe an afternoon if you already know React. So if you're asking how long it takes to set up* a new project — about three minutes. If you're asking how long a migration from React takes — that's where it gets interesting.

You might be surprised how often this gets overlooked.

I've moved three production apps to Preact in the last two years. One took a weekend. So one took six weeks. The difference wasn't the library. It was the dependencies.

Let's break this down by what you're actually trying to accomplish.

What Is Preact (And Why the Question Matters)

Preact is a 3kb alternative to React with the same modern API. Same hooks. Same mental model. It just... weighs less. Same component model. A lot less.

The question "how long does Preact take" usually hides one of four real questions:

• How long to learn it?
• How long to scaffold a new project?
• How long to migrate an existing React app?
• How long does it add to my build pipeline?

Each answer is different. And the last one might surprise you.

How Long to Learn Preact

If You Already Know React

Two to four hours. That's it.

You already understand components, props, state, effects, context. Preact uses the exact same patterns. The only differences you'll actually encounter in daily work:

• class instead of className (but className works too)
• onClick instead of onClick — wait, that's the same
• No synthetic event system — you get real DOM events
• preact/compat aliases React imports automatically

I spent a Saturday reading the docs, porting a small side project, and hitting exactly two gotchas. That's why both were third-party libraries that hardcoded react imports. On top of that, fixed with aliases. Done.

If You Don't Know React

Add two to four weeks. Same as learning React. Preact doesn't make the concepts* easier — components, state, effects, re-renders — it just makes the bundle* smaller. The learning curve is React's learning curve.

But here's the thing: Preact's source code is readable. Like, actually readable. I've learned more about how React works internally by reading Preact's source than from any React internals blog post. If you're the type who learns by reading library code, Preact pays dividends.

How Long to Set Up a New Project

Vite + Preact: ~3 Minutes

npm create vite@latest my-app -- --template preact
cd my-app
npm install
npm run dev

That's not marketing copy. That's literally what I typed last Tuesday. So hot module replacement works. In practice, typeScript works. In practice, cSS modules work. You're writing components in 180 seconds.

Next.js Style: Preact CLI or Astro

Want file-based routing? SSR? Static generation?

Astro + Preact takes maybe five minutes:

npm create astro@latest -- --template preact

Preact CLI (the old school way) still works but I'd steer new projects toward Vite or Astro. The ecosystem moved on.

Manual Webpack/Rollup Config

Don't. Just don't. Unless you have a very specific reason, you're solving a problem that doesn't exist. Five minutes becomes two hours of config debugging.

How Long to Migrate From React

Basically the question most people actually have. And the answer ranges from "an afternoon" to "two months."

The Easy Path: Greenfield Components

Start new features in Preact. Keep the React app running. Use preact/compat to mount Preact components inside React (or vice versa) during transition.

I did this for a dashboard rewrite. Old pages = React. New pages = Preact. Zero runtime conflicts. Shared component library = Preact with preact/compat publishing dual builds. The migration happened feature by feature over three months with zero "big bang" risk.

The Medium Path: Full Swap With Compat

If your app is mostly standard React + common libraries (React Router, Redux, styled-components, etc.), preact/compat handles 90% of it.

What works automatically:

• react → preact/compat alias
• react-dom → preact/compat alias
• react/jsx-runtime → preact/jsx-runtime alias
• Most hooks, context, portals, refs

What breaks:

• Libraries that reach into React internals
• Enzyme (use Testing Library instead)
• Some CSS-in-JS solutions
• Anything using ReactDOMServer internals

For a 40k LOC app with standard dependencies, I've seen this take two to five days of actual work. Spread over a sprint or two for safety.

For more on this topic, read our article on newton's 3rd law of motion example or check out passive transport goes against the gradient. true or false.

The Hard Path: Legacy + Weird Dependencies

One app I migrated had:

• A custom React reconciler fork (don't ask)
• Three internal libraries that imported react-reconciler directly
• A design system that monkey-patched Component.prototype
• Server rendering that manipulated ReactDOMServer internals

That one took six weeks. That said, two engineers. We ended up rewriting the design system and dropping the custom reconciler entirely.

The lesson: preact/compat is excellent. But it can't fix code that assumes React's internal implementation details.

How Long Does Preact Add to Build Time

Negative time. It reduces* build time.

Bundle Size

That's 6-7x smaller. Plus, your CDN serves less. Your users download less. Your parse/eval time drops measurably on low-end devices.

Compile Time

Preact's JSX transform is faster. Think about it: fewer types. Simpler runtime. In a 50k LOC codebase, I've seen TypeScript + Vite builds drop from ~45s to ~32s. Not life-changing, but real.

Dev Server Startup

Vite + Preact starts in ~300ms on my M1. React adds ~150ms. Again, not huge. But it adds up over 50 starts a day.

Common Mistakes / What Most People Get Wrong

Mistake 1: Assuming preact/compat Is Magic

It's not. On the flip side, it adds ~1kb and handles the common cases. But if a library does require('react').Consider this: it's a compatibility layer. unstable_batchedUpdates, you're on your own.

Fix: Audit your node_modules for direct React imports before committing. npm ls react shows you everything.

Mistake 2: Forgetting to Alias in Tests

Jest, Vitest, Cypress — they all need the alias configured. If your tests import react directly, they'll pull in actual React. And double the bundle. Confusing errors.

Fix: Add this to your test config:

// vitest.config.ts
resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat',
    'react/jsx-runtime': 'preact/jsx-runtime',
  }
}

Mistake 3: Using React DevTools Without the Plugin

Preact has its own DevTools. But if you're used to React DevTools, install @preact/devtools and the browser extension. They're good. Component inspection, hooks, props — all work.

Mistake 4

Mistake 4: Ignoring Hydration Mismatches

Preact and React handle hydration slightly differently. While preact/compat covers most cases, edge cases around refs, context, or component lifecycles can cause mismatches between server-rendered and client-rendered output.

Example: A component that reads this.context in componentDidMount might behave differently because Preact's compat layer doesn't perfectly replicate React's timing for context updates.

Fix: Thoroughly test hydration scenarios. Use tools like preact-cli's built-in hydration checker or write integration tests that compare server vs. client output. Pay special attention to third-party libraries that manipulate the DOM during mounting.

Mistake 5: Overlooking Event System Differences

Preact uses a synthetic events system similar to React, but there are subtle differences in event delegation and propagation. Libraries that directly manipulate event listeners or rely on specific React event behaviors (like e.persist()) may break.

Fix: Audit for direct DOM event usage. Replace e.persist() calls with proper state management or refs. Test interactive components thoroughly, especially those using drag-and-drop, complex forms, or custom event handling.

Conclusion

Migrating to Preact offers significant benefits: smaller bundles, faster builds, and improved performance on resource-constrained devices. That said, success depends heavily on understanding your application's dependencies and avoiding assumptions about compatibility.

Key takeaways:

• Audit dependencies early—npm ls react is your friend
• Configure test environments properly to avoid duplicate React instances
• Test hydration and event handling thoroughly, especially with legacy code
• Expect smoother sailing with modern codebases; legacy apps may require deeper refactoring

The migration effort is typically justified by the performance gains, but it requires careful planning and realistic expectations about compatibility layers. Most importantly, don't treat preact/compat as a silver bullet—it's a bridge, not a magic wand.