Derived Values

January 6, 2025

2,516 words

This article is part of a series: The Framework Field Guide - Fundamentals

  1. Part 1: Preface
  2. Part 2: Introduction to Components
  3. Part 3: Dynamic HTML
  4. Part 4: Side Effects
  5. Part 5: Derived Values
  6. Part 6: Transparent Elements
  7. Part 7: Passing Children
  8. Part 8: Element Reference
  9. Part 9: Component Reference
  10. Part 10: Error Handling
  11. Part 11: Dependency Injection
  12. Part 12: Portals
  13. Part 13: Shared Component Logic
  14. Part 14: Directives
  15. Part 15: Accessing Children
  16. Part 16: Framework Comparison Table

We've previously touched on how to pass values to a component as properties earlier in the book:

const FileDate = ({ inputDate }) => {	const [dateStr, setDateStr] = useState(formatDate(inputDate));	const [labelText, setLabelText] = useState(formatReadableDate(inputDate));	return <span aria-label={labelText}>{dateStr}</span>;};

You may notice that we're deriving two values from the same property. This works fine at first, but an issue arises with how we're doing things when we realize that our formatDate and formatReadableDate methods are only running once during the initial render.

Because of this, if we pass in an updated inputDate to the FileDate component, the values of formatDate and formatReadableDate will become out of sync from the parent's passed inputDate.

const File = ({ href, fileName, isSelected, onSelected, isFolder }) => {	const [inputDate, setInputDate] = useState(new Date());	useEffect(() => {		// Check if it's a new day every 10 minutes		const timeout = setTimeout(			() => {				const newDate = new Date();				if (inputDate.getDate() === newDate.getDate()) return;				setInputDate(newDate);			},			10 * 60 * 1000,		);		return () => clearTimeout(timeout);	}, [inputDate]);	// JSX shortened for focus	// This may not show the most up-to-date `formatDate` or `formatReadableDate`	return <FileDate inputDate={inputDate} />;};

React Refreshing File Date - StackBlitz

https://stackblitz.com/github/playfulprogramming/playfulprogramming/tree/main/content/crutchcorn/collections/framework-field-guide-fundamentals/posts/ffg-fundamentals-derived-values/ffg-fundamentals-react-refreshing-file-date-45?template=node&embed=1&file=src%2Fmain.jsx
New tab

While the above File component updates inputDate correctly, our FileDate component is never listening for the changed input value and, as such, never recomputed the formatDate or formatReadableDate value to display to the user.

How can we fix this?

Method 1: Prop Listening

The first - and arguably easiest to mentally model - method to solve this disparity between prop value and display value is to simply listen for when a property's value has been updated and re-calculate the display value.

Luckily, we can use our existing knowledge of side effects to do so:

const FileDate = ({ inputDate }) => {	const [dateStr, setDateStr] = useState(formatDate(inputDate));	const [labelText, setLabelText] = useState(formatReadableDate(inputDate));	useEffect(() => {		setDateStr(formatDate(inputDate));		setLabelText(formatReadableDate(inputDate));		// Every time `inputDate` changes, it'll trigger a render and therefore call the `useEffect`	}, [inputDate]);	return <span aria-label={labelText}>{dateStr}</span>;};

React Prop Listening - StackBlitz

https://stackblitz.com/github/playfulprogramming/playfulprogramming/tree/main/content/crutchcorn/collections/framework-field-guide-fundamentals/posts/ffg-fundamentals-derived-values/ffg-fundamentals-react-prop-listening-46?template=node&embed=1&file=src%2Fmain.jsx
New tab

While this method works, it tends to introduce duplicate developmental logic. For example, notice how we have to repeat the declaration of the dateStr and labelText values twice: Once when they're initially defined and again inside the property listener.

Luckily for us, there's an easy solution for this problem called "computed values."

Method 2: Computed Values

Our previous method of deriving a value from a property follows two steps:

  1. Set an initial value
  2. Update and recompute the value when its base changes

However, what if we could instead simplify this idea to a single step:

  1. Run a function over a value and live update as it changes.

This may remind you of a similar pattern we've used already for live updated text and attribute binding.

Luckily for us, all three frameworks have a way of doing just this!

import { useMemo } from "react";const FileDate = ({ inputDate }) => {	const dateStr = useMemo(() => formatDate(inputDate), [inputDate]);	const labelText = useMemo(() => formatReadableDate(inputDate), [inputDate]);	return <span aria-label={labelText}>{dateStr}</span>;};

React Computed Values - StackBlitz

https://stackblitz.com/github/playfulprogramming/playfulprogramming/tree/main/content/crutchcorn/collections/framework-field-guide-fundamentals/posts/ffg-fundamentals-derived-values/ffg-fundamentals-react-computed-values-47?template=node&embed=1&file=src%2Fmain.jsx
New tab

useMemo is a method for computing values based on an input or series of inputs. This works because it does the computation and regenerates the calculation whenever the second argument array's values have changed in a render.

Like useEffect, this array's values' changes are only tracked when the component is rendered. Unlike useEffect, however, there's no option to remove the second array argument entirely.

Instead, if you want to recalculate the logic in every render, you'd remove the useMemo entirely. So, for simple computations, you can take this code:

const AddComp = ({ baseNum, addNum }) => {	const val = useMemo(() => baseNum + addNum, [baseNum, addNum]);	return <p>{val}</p>;};

And refactor it to look like this:

const AddComp = ({ baseNum, addNum }) => {	const val = baseNum + addNum;	return <p>{val}</p>;};

While it's technically possible to use this trick to never use useMemo, your application's performance will suffer drastically. That said, it's a bit of a science to know when and where to use useMemo. We'll touch on this more in our third book titled "Internals".

Non-Prop Derived Values

While we've primarily used component inputs to demonstrate derived values today, both of the methods we've used thus far work for the internal component state and inputs.

Let's say that we have a piece of state called number in our component and want to display the doubled value of this property without passing this state to a new component:

const CountAndDoubleComp = () => {	const [number, setNumber] = useState(0);	const doubleNum = useMemo(() => number * 2, [number]);	return (		<div>			<p>{number}</p>			<p>{doubleNum}</p>			<button onClick={() => setNumber(number + 2)}>Add one</button>		</div>	);};

React Non-Prop Derived - StackBlitz

https://stackblitz.com/github/playfulprogramming/playfulprogramming/tree/main/content/crutchcorn/collections/framework-field-guide-fundamentals/posts/ffg-fundamentals-derived-values/ffg-fundamentals-react-non-prop-derived-48?template=node&embed=1&file=src%2Fmain.jsx
New tab

In this component, we can see two numbers — one doubling the value of the other. We then have a button that allows us to increment the first number, and therefore, using a derived value, the second number also updates.

Challenge

While building through our continued file hosting application, let's think through how our Size can be calculated to be displayed in the UI like so:

A table of files and folders with "Name", "LAst modified", "Type", and "Size" headings

File sizes are usually measured in how many bytes it takes to store the file. However, this isn't exactly useful information past a certain size. Let's instead use the following JavaScript to figure out how large a file size is, given the number of bytes:

const kilobyte = 1024;const megabyte = kilobyte * 1024;const gigabyte = megabyte * 1024;function formatBytes(bytes) {	if (bytes < kilobyte) {		return `${bytes} B`;	} else if (bytes < megabyte) {		return `${Math.floor(bytes / kilobyte)} KB`;	} else if (bytes < gigabyte) {		return `${Math.floor(bytes / megabyte)} MB`;	} else {		return `${Math.floor(bytes / gigabyte)} GB`;	}}

Fun code challenge for you at home — can you write the above in fewer lines of code? 🤔

With this JavaScript, we can use a derived value to display the relevant display size. Let's build this out using a dedicated DisplaySize component:

function DisplaySize({ bytes }) {	const humanReadableSize = useMemo(() => formatBytes(bytes), [bytes]);	return <p>{humanReadableSize}</p>;}const kilobyte = 1024;const megabyte = kilobyte * 1024;const gigabyte = megabyte * 1024;function formatBytes(bytes) {	if (bytes < kilobyte) {		return `${bytes} B`;	} else if (bytes < megabyte) {		return `${Math.floor(bytes / kilobyte)} KB`;	} else if (bytes < gigabyte) {		return `${Math.floor(bytes / megabyte)} MB`;	} else {		return `${Math.floor(bytes / gigabyte)} GB`;	}}
Final code output

React Derived Challenge - StackBlitz

https://stackblitz.com/github/playfulprogramming/playfulprogramming/tree/main/content/crutchcorn/collections/framework-field-guide-fundamentals/posts/ffg-fundamentals-derived-values/ffg-fundamentals-react-derived-challenge-49?template=node&embed=1&file=src%2Fmain.jsx
New tab
Previous articleSide Effects
Next article Transparent Elements

Subscribe to our newsletter!

Subscribe to our newsletter to get updates on new content we create, events we have coming up, and more! We'll make sure not to spam you and provide good insights to the content we have.

View this post on GitHub Join our Discord server