From Classes to Functions — The Right Way


✍️ Introduction
Hi there! 👋
I'm Daniel, and together with my friend Alberto, we’re the team behind a project called Unclass.
We’ve been working in React for years — and we’ve experienced the frustration firsthand:
migrating from class components to function components isn’t just tedious... it can be a complete nightmare.
If you've ever dealt with this
, binding event handlers, or digging through outdated lifecycle methods, you know what we mean.
💡 Why we’re building Unclass
Unclass is a CLI tool designed to help you automate the process of migrating your React class components into modern, functional ones — using hooks, clean syntax, and up-to-date best practices.
But here’s the thing: before we offer you automation, we want to do something different.
We want to show you everything that goes into this migration — manually, step by step, from scratch.
Because we believe the best tools don’t just work — they make you smarter and more confident about what’s happening under the hood.
That’s why we’re launching this blog series.
🔍 What you’ll learn in this series
Each week, I’ll publish a new article walking you through:
✅ The real reasons to migrate (and when you shouldn’t)
✅ How class components work internally
✅ How functional components work with hooks
✅ Manual migration steps — useState
, useEffect
, useRef
, useContext
, and more
✅ Advanced edge cases and how to handle them
✅ Tools and strategies to support large-scale migrations
✅ Behind the scenes of how Unclass works and why we designed it that way
By the end of the series, you'll be able to migrate components manually with confidence — and you’ll be ready to decide when to let a tool like Unclass take over.
🚀 Try the Free Analyzer
As part of our open approach, we will also build a free online analyzer that lets you inspect any class component and see what it would take to migrate it.
You’ll get:
A breakdown of what your component uses (state, lifecycle, refs, etc.)
A list of hooks you'd need to use
A summary of migration complexity
No code changes, just visibility and insight
👉 This tool will be available soon — and totally free.
🧭 What is Unclass, really?
Unclass is a CLI tool built with TypeScript, Project Builder, and Schematics under the hood. It works in three stages:
Analyze: Scan your component and understand what’s going on
Migrate: Generate a side-by-side functional version
Apply: Replace the original when you’re ready — safely
You get control, visibility, and speed — without breaking your code.
And we’re building it with care, transparency, and real-world developer pain in mind.
📬 Join Us on This Journey
If you’re currently working with legacy class components — or if you’re part of a team thinking about upgrading — this series is for you.
We’d love for you to:
Follow the blog to get weekly insights
Try the analyzer once it’s live
Join the waitlist to be part of the first group to try Unclass CLI
Help shape the tool by sharing your challenges and needs
Let’s make React migration less painful, and a lot more empowering.
Thanks for being here 🙌
— Daniel & Alberto
Subscribe to my newsletter
Read articles from Unclass directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Unclass
Unclass
We're building tools that help teams migrate from React class components to functional components — starting with free education, moving toward powerful automation. Creator of Unclass, a CLI and analyzer to bring legacy code into the modern React era. I write weekly about React migration, code transformation, and automation with TypeScript.