Frameworks like Vue have the notion of “computed properties” – a way to derive some new, possibly complex data based on something passed in.
This post covers how to achieve the same result in React.
Compute the Property at Render Time
The “React way” to handle computing derived data is to compute it in the render
method (or in the function body, if it’s a stateless component). Yes, right at render time. Yes, every single render. (We’ll talk about performance in a minute)
The simplest way is to do it inline, like this. Remember that with React, you can run arbitrary JS code inside single braces, and React will render out the result of that expression.
function UrlPath({ fullUrl }) {
return (
<div>{new URL(fullUrl).pathname}</div>
);
}
<UrlPath fullUrl="https://daveceddia.com/pure-react/" />
<div>/pure-react/</div>
If your computation is short and sweet, just put it in render
.
Simple operations are unlikely to cause performance problems, but if you notice a slowdown, take a look at your browser’s performance tools. Chrome, Firefox, Safari, and Edge all have built-in tools, usually under the “Performance” tab of devtools, that’ll let you record your running app and see where the slowdown is happening.
If your computation is complex, you might want to pull it out of your component and put it in a function. This would make it reusable in other components, too. Here’s an example of filtering and sorting a list of products to only show the “new” ones, and sort them by price:
function newItemsCheapestFirst(items) {
return items
.filter(item => item.isNew)
.sort((a, b) => {
if(a.price < b.price) {
return -1;
} else if(a.price > b.price) {
return 1;
} else {
return 0;
}
});
}
function NewItemsList({ items }) {
return (
<ul>
{newItemsCheapestFirst(items).map(item =>
<li key={item.id}>{item.name}, ${item.price}</li>
)}
</ul>
);
}
Here’s a working example on CodeSandbox.
The newItemsCheapestFirst
function is doing most of the work here. We could inline it into the component, but it’s much more readable (and reusable) with it written as a standalone function.
Notice that the computation function doesn’t deal with creating the <li>
element for each item. That’s intentional, to keep the “item handling stuff” separate from the “item rendering stuff”. Let the React component NewItemsList
deal with rendering, while the newItemsCheapestFirst
function deals with the data.
Computations in a Class Component
You can adapt the example above to a class
component by moving the newItemsCheapestFirst
function into the class, like this:
(Know that you don’t have to do this, though – if you want the function to be reused by other components, it makes more sense to leave it as a regular standalone function)
class NewItemsList extends React.Component {
newItemsCheapestFirst() {
return this.props.items.filter(item => item.isNew).sort((a, b) => {
if (a.price < b.price) {
return -1;
} else if (a.price > b.price) {
return 1;
} else {
return 0;
}
});
}
render() {
return (
<ul>
{this.newItemsCheapestFirst().map(item => (
<li key={item.id}>
{item.name}, ${item.price}
</li>
))}
</ul>
);
}
}
You could even take it one step further and turn the computation into a getter, so that accessing it works like accessing a property:
class NewItemsList extends React.Component {
get newItemsCheapestFirst() {
return this.props.items.filter(item => item.isNew).sort((a, b) => {
if (a.price < b.price) {
return -1;
} else if (a.price > b.price) {
return 1;
} else {
return 0;
}
});
}
render() {
return (
<ul>
{this.newItemsCheapestFirst.map(item => (
<li key={item.id}>
{item.name}, ${item.price}
</li>
))}
</ul>
);
}
}
Personally, I’d probably stick with the “function” approach, rather than using a getter. I think mixing and matching the two would lead to confusion – should it be this.newItemsCheapestFirst
or this.newItemsCheapestFirst()
? Be consistent in whatever you choose to do.
Memoize Expensive Computations
If your computation is expensive – maybe you’re filtering a list of hundreds of items or something – then you can get a nice performance boost by memoizing (but not memoRizing) your computation function.
What is Memoization?
Memoization is a fancy word for caching. It says “Remember the result of calling this function, and next time it’s called with the same argument(s), just return the old result instead of recomputing it.” The function is basically memorizing the answers. It’s still called “memoization,” though. Without the “r”.
How Does Memoization Work?
You can use an existing memoize function, like the one in Lodash, or you can write your own with not much code. Here is an example, patterned after the one in Lodash:
function memoize(func) {
let cache = new Map();
const memoized = function (...args) {
let key = args[0];
if (cache.has(key)) {
return cache.get(key);
}
let result = func.apply(this, args);
cache.set(key, result);
return result;
};
return memoized;
}
function doSort(items) {
console.log('doing the sort');
return items.sort();
}
let memoizedSort = memoize(doSort);
let numbers = [1,7,4,2,4,9,28,3];
memoizedSort(numbers);
memoizedSort(numbers);
memoizedSort(numbers);
Here’s the working example on CodeSandbox.
How to Use Memoization With React
Now that you have a handle on how memoization works, and have a memoization function in hand (your own or someone else’s), you can wrap your expensive function calls with it.
That could look something like this:
function newItemsCheapestFirst(items) {
return items
.filter(item => item.isNew)
.sort((a, b) => {
if(a.price < b.price) {
return -1;
} else if(a.price > b.price) {
return 1;
} else {
return 0;
}
});
}
memoizedCheapestItems = memoize(newItemsCheapestFirst);
function NewItemsList({ items }) {
return (
<ul>
{memoizedCheapestItems(items).map(item =>
<li key={item.id}>{item.name}, ${item.price}</li>
)}
</ul>
);
}
ONE HUGE CAVEAT: Make sure you’re not re-creating the memoized function every time, or you won’t see any benefits from it – it will be called every time. In other words, if your call to memoize
happens every render, that’s not good. Do not do this:
function NewItemsList({ items }) {
const memoizedExpensiveFunction = memoize(expensiveFunction);
return (
<ul>
{memoizedExpensiveFunction(items).map(item =>
<li key={item.id}>{item.name}, ${item.price}</li>
)}
</ul>
);
}
Recap
Here’s what we covered:
- React doesn’t have “computed properties” but you can achieve the same effect with functions
- If the computation is short and quick, do it in
render
(or directly in a function component) - If the computation is complex to read or needs to be reused, extract it to a function.
- If the computation is expensive to run, consider memoizing it.
If you want to remember this stuff, pick a practice exercise or two and build it out on CodeSandbox. Typing it out with your own two hands is the best way to learn :)
Computed Properties in React was originally published by Dave Ceddia at Dave Ceddia on August 14, 2018.