Digital Toolkit vs Pencil Box
A Creative Analogy to Understand Class and Function Components in React
When I first started learning React, I felt like an artist deciding which tools to use. Should I stick to the traditional toolkit or switch to the modern digital app? That’s exactly what the difference between Class Components and Function Components feels like.
The Traditional Way – Class Components
Imagine sitting at a desk, ready to draw. In front of you is a pencil box filled with tools: pencils, erasers, sharpeners, a ruler, maybe even a compass.
Every time you want to add detail, you reach for a different tool.
Want to shade? Pick a pencil.
Want to fix a mistake? Grab the eraser.
Want a circle? Use the compass.
It works, no doubt. But it feels heavy and procedural. You’re constantly managing tools, keeping track of steps, and making sure you don’t misplace anything.
This is what Class Components are like in React. You get structure, built-in methods, and lifecycle hooks, but there’s more overhead. Every class component requires a constructor for initializing state, explicit use of this to access props and methods, and lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount to manage side effects. Updating the state involves - this.setState(), merging the new state with the existing state in a controlled manner. While class components provide a clear separation of concerns and are fully capable of managing complex UI and stateful logic, they tend to be more verbose and rigid!
The Modern Way – Function Components
Now, imagine opening an iPad with a stylus. Suddenly, you don’t need a separate eraser, compass, or sharpener. Everything you need—brushes, colors, undo/redo, even layers—is right there in one place.
If you want to try something new, just switch tools with a tap. No fumbling, no extra setup. It feels lighter, faster, and modern.
This is what Function Components with Hooks are like. They give you all the power of React—state, side effects, reusability—without the weight of class syntax and lifecycle methods. React has exciting hooks, which are like a great assist while coding complex logic. Function components are lighter, more modular, and highly reusable, making them the modern standard for building React applications.
Which Should You Choose?
Both approaches let you create beautiful art. But while traditional tools (Class Components) still work, most artists today prefer the iPad (Function Components). They’re simpler, more flexible, and the recommended way forward in React.
So the next time you sit down to “draw” with React, ask yourself:
Do you want the pencil box or the digital canvas?
