---
title: "React useMemo() hook simple example"
description: "Cutting right to the point where and when to use the useMemo() hook for code optimization."
canonical_url: "https://www.tarmac.io/resources/react-usememo-hook-simple-example/"
last_updated: "2026-10-07"
---
[Resources](https://www.tarmac.io/resources/) / Engineering
# React useMemo() hook simple example
Cutting right to the point where and when to use the useMemo() hook for code optimization.
Aleksandar Lazarevski · January 12, 2021 Engineering
Cutting right to the point where and when to use the useMemo() hook for code optimization.
### Intro
React’s [**useMemo**](https://reactjs.org/docs/hooks-reference.html#usememo) hook is a [memoization](https://en.wikipedia.org/wiki/Memoization) function that **caches a value returned by an expensive function**. The goal of the optimization concept is that the execution of the expensive function runs **only on the first render**invoked, **or** it executes only when a **referenced input parameter** has **changed** its value.
### Example
Let’s take the following React Component for an example:
```
import React, { useState } from 'react';
const expensiveFunction = (inputValue) => {
let expensiveValue = inputValue * 42;
... lots and lots of computing depending on inputValue ...
expensiveValue = 'World';
return expensiveValue;
};
const MyComponent = ({ something }) => {
```
```
const [inputValue, setInputValue] = useState('');
```
```
const expensiveValue = expensiveFunction(inputValue);
```
```
return Hello {expensiveValue}
;
};
export default MyComponent;
```
From the code above, we can conclude that the **expensiveFunction()** will execute on **every render** of **MyComponent**, which is triggered by a state change of the **inputValue** or even **something** as a prop.
To solve this, we need to introduce **useMemo**to the expensiveFunction() and inputValue as a dependent parameter that will execute the expensiveFunction only if its value changes:
```
import React, { useState, useMemo } from 'react';
const expensiveFunction = (inputValue) => {
let expensiveValue = inputValue * 42;
... lots and lots of computing including inputValue ...
expensiveValue = 'World';
return expensiveValue;
};
const MyComponent = ({ something }) => {
const [inputValue, setInputValue] = useState('');
```
```
const expensiveValue = useMemo(
() => expensiveFunction(inputValue),
[ inputValue ]
);
```
```
return Hello {expensiveValue}
;
};
export default MyComponent;
```
The first argument to useMemo is a creator function (factory) that executes the expensiveFunction (can be written inline) and returns the expensiveValue, where as the second parameter is an array of the dependent parameters that will trigger/execute the calculation when inputValue changes.
So as long as the dependent parameter inputValue does not change, the expensiveFunction will only be executed on the first MyComponent render. Every consecutive render will get the cached expensiveValue. This way we have an optimized React Component that is light to render.
### Conclusion
These little tweaks to your child components can have a drastic improvement in your app’s performance. Exercise by identifying which parts can be memoized and be careful on the references not to over-do it. Look for list generators, filtered array values from an array prop, boolean values calculated from rarely changing big data passed onto the component or a web service result etc.
Keep reading
## More on Engineering
[
### C4 diagrams your AI agents can actually read
Confluence PNGs are invisible to your coding agents. C4, ERD, and sequence diagrams belong in the repo as Mermaid text, not a picture nobody updates.
August 25, 2026](https://www.tarmac.io/resources/c4-diagrams-for-ai-agents/)[
### A definition of done for humans and agents
Works on my machine is not a definition of done. A field guide to the checks that make done mean done, for human pull requests and AI agents alike.
July 30, 2026](https://www.tarmac.io/resources/definition-of-done-humans-and-agents/)[
### Go, Rust, or Python: picking a backend at scale
When success at scale strains Python, the fix is rarely a rewrite. How to choose Go, Rust, or Zig for the one service that needs it.
July 27, 2026](https://www.tarmac.io/resources/go-rust-python-backend-at-scale/)
## Let’s build something worth taking off.
Tell us what you’re building. We’ll assemble the senior team to ship it.
[Let’s team up→](https://www.tarmac.io/contact/?source=resources-react-usememo-hook-simple-example)
## Sitemap
See the full [sitemap](https://www.tarmac.io/sitemap.md) for all pages on tarmac.io.