Story Time: Learning useRef, useMemo, and useCallback
Understanding React Hooks Through the Story of a Little Gardener’s Daily Routine
In a quiet corner of a vibrant garden, a small girl tended to her plants every day. She knew that each plant required care in just the right way—some needed careful watering, some needed tracking, and some required consistent routines.
Managing a garden this way is not so different from managing a React app. Just as she had her habits and tools, React provides hooks like useRef, useMemo, and useCallback to make handling values, computations, and functions efficient and predictable.
As the morning sun rose, she noticed her tallest sunflower. Curious about how much it had grown, she marked its current height on a small stick.
Days passed, and whenever the sunflower grew taller, she added a new mark for the updated height. These marks didn’t affect the plant’s growth; they were simply references to track progress.
In React, useRef works the same way. It allows you to store a value across renders without triggering re-renders, whether you’re tracking DOM elements, storing mutable values, or keeping a reference for later use.
const plantHeight = useRef(0);
plantHeight.current = 15;
By midday, the girl moved to her rose bush. She had learned the perfect amount of water to give it based on the soil and the size of the plant. Instead of calculating this every time she watered, she kept the amount fixed until either the plant or the soil required a change.
Similarly, useMemo in React, memorizes the result of a computation and only recalculates it when its dependencies change. This saves effort and ensures that expensive calculations don’t run unnecessarily, keeping everything efficient and smooth.
const waterAmount = useMemo(() => soil.moisture * plant.size * 0.5, [plant.size, soil.moisture]);
As evening approached, she prepared her daily watering routine. She had perfected the steps over time, and she didn’t want to rewrite them every day. Instead, she followed the same routine unless the plant or soil conditions changed.
In React, useCallback serves this purpose. It memorizes a function and recreates it only when dependencies change, which is particularly useful when passing functions to child components. This way, the garden runs smoothly, and no unnecessary work is repeated.
const waterPlant = useCallback(() => console.log(`Watering ${plant.name} with ${soil.moisture} moisture`), [plant.name, soil.moisture]);
Quick Reference Table
| Hook | Garden Analogy | React Purpose | Example Use Case |
useRef | Mark plant height (add new marks as it grows) | Keep a value across renders without re-rendering | Tracking DOM elements or mutable values |
useMemo | Fixed watering amount | Memorize expensive computations | Calculating derived state |
useCallback | Reusable watering routine | Memorize functions to avoid re-creation | Passing stable callbacks to child components |
By the end of the day, the small girl’s garden thrived. Her careful habits—marking heights, fixing watering amounts, and following reusable routines—kept every plant growing beautifully.
In the same way, using useRef, useMemo, and useCallback wisely allows your React apps to run efficiently, stay organized, and “bloom” reliably, just like a well-tended garden.
