From Calm Skies to Colorful States: Learning useState in React
Discover React Hooks and useState with a sky-inspired story that makes state management simple and intuitive.
It rained this evening, and as I sipped my tea under the open sky, I watched the colors shift—sometimes glowing, fading, changing completely as the wind carried the clouds. It felt calm, alive, and endlessly beautiful.
But then I wondered—what if the sky couldn’t change its colors? What if once the day began, the sky stayed the same until the next day? No gentle shifts with the wind, no golden hues at sunset, no rainbow after the rain. Just one fixed canvas, locked in place.
That’s how functional components in React used to be. Before 2019, when hooks didn’t exist, function components were only capable of rendering JSX [ “JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code inside your JavaScript.” ]. They could display whatever props were passed down to them, but they had no state of their own. No matter what happened—wind, rain, or sunlight—their output stayed fixed until the parent re-rendered them.
A sky that cannot change with the weather… what a sad, colorless world that would be.
But then came Hooks! With hooks, function components could finally hold state and react to changes around them. Hooks are built-in functions in React that allow functional components to access core features like state, lifecycle events, and context. They were introduced in React 16.8 (2019) to give functional components the same power as class components—without the added complexity and boilerplate that classes require.
The first and most powerful of these is useState. useState is like the color bucket of the sky—it remembers the current shade, and whenever the environment changes, React updates the view with a new one. Red shifts to orange, orange to yellow, yellow to green, and so on! Let’s delve into this deeper!
Imagine you’re building a <Cloud> component—a simple cloud shape with a button inside it. The goal is that whenever the button is pressed, the cloud’s color should change. Without hooks, the component is read-only. The <Cloud> cannot manage its own color internally. To make it dynamic, it would need props from a parent component, along with a callback function to request a color change. Without this parent-managed state, the cloud cannot alter its color on its own.
Imagine the same <Cloud> component, but now we can use hooks. With the useState hook, the cloud can manage its own color internally, without relying on a parent component.
You declare a state variable for the color inside the
<Cloud>component.When the button is pressed, you simply update the state, and React automatically re-renders the cloud with the new color.
No need for props, no need for a parent callback, no extra boilerplate—everything is self-contained.
const [color, setColor] = React.useState("blue");- With every click, the setColor function can be called, and the color of the cloud can change within!
Hooks are like giving the cloud its own paint bucket. Before, it had to ask its parent for a new color each time. Now, it can just dip its own brush and change color instantly whenever it wants.
