Digital Toolkit vs Pencil Box

A Creative Analogy to Understand Class and Function Components in React

PublishedSeptember 3, 2025

•2 min read•View as Markdown

Vidushi Singla

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Growing State Management: A Gentle Introduction to Zustand

The Garden That Grew Too Wild Imagine you own a small garden.Every day you walk through it — watering, trimming, planting new seeds. At first, it’s peaceful.But as your garden grows, you start keeping lists — which plant needs sunlight, which one nee...

Oct 6, 20253 min read

Growing State Management: A Gentle Introduction to Zustand

From Garden Shop to Web Apps

The Beginning: A Gardener with a Vision Imagine you own a small garden shop. Every day, people visit you for plants — some want instant pick-ups, others want something fresh, and a few enjoy growing plants themselves. You quickly realize:How you deli...

Oct 1, 20254 min read

Micro-Frontends vs Traditional Frontends

Should You Grow One Garden or Many?

Sep 29, 20253 min read

Micro-Frontends vs Traditional Frontends

From Soil to Garden: How Next.js Grew from React

When you start gardening, the first thing you need is soil.That’s what React is — the soil where you can plant your UI components. React gave developers the flexibility to grow anything: buttons, forms, and entire applications. But just like raw soil...

Sep 28, 20253 min read

From Soil to Garden: How Next.js Grew from React

Story Time: Learning useRef, useMemo, and useCallback

Understanding React Hooks Through the Story of a Little Gardener’s Daily Routine

Sep 24, 20253 min read

Story Time: Learning useRef, useMemo, and useCallback

We Act and Re-act

13 posts

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?

Command Palette

Comments

More from this blog

The Traditional Way – Class Components

The Modern Way – Function Components

Which Should You Choose?