This content originally appeared on DEV Community and was authored by Cathy Lai
What is a factory function?
A factory function is a function that creates and returns objects or functions. Unlike constructors (which use new), factory functions are plain functions — no special syntax required.
function createUser(name) {
return {
name,
sayHi() {
return `Hi, I'm ${name}`;
}
};
}
const user1 = createUser("Cathy");
console.log(user1.sayHi()); // Hi, I'm Cathy
Why use them?
- ✅ Avoids
newkeyword - ✅ Easy to customize per instance
- ✅ Works naturally with closures (private state)
When React uses them
Hooks like useMemo(() => computeSomething(), [deps]) expect a factory function — React calls it when dependencies change.
The () => computeSomething() is the factory, producing a new value only when needed.
The factory must be zero-argument because React is the one calling it, not you.
The factory gets run automatically by React whenever it decides dependencies have changed.
React always calls it like factory() — never factory(name).
Because React itself is in charge of calling your function. It just runs () => { ... } whenever dependencies change. You don’t get to pass in arguments — React only passes nothing.
If you want to use some variable inside, you capture it from scope (closure):
const value = useMemo(() => expensiveCalculation(input), [input]);
A normal function
Just does something when you call it.
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 5
You call it → you get a result. Nothing fancy.
A factory function
Instead of doing work immediately, it creates and returns something (an object, another function, or some resource).
You can think of it as a “thing-maker”.
function createUser(name) {
return {
name,
sayHi() {
return `Hi, I'm ${name}`;
}
};
}
const user1 = createUser("Cathy");
console.log(user1.sayHi()); // "Hi, I'm Cathy"
Here createUser is a factory function: it makes new user objects.
Factory function vs constructor
Factory function: a plain function that returns a new object/function.
Constructor (with new): special function where this creates the object.
function User(name) {
this.name = name;
}
const u = new User("Cathy"); // constructor
Factory functions don’t need new.
In the context of useMemo
When I said factory function for useMemo, I meant:
useMemo(() => computeSomething(a, b), [a, b]);
That () => computeSomething(a, b) is a factory.
React calls it only when needed to “make” (produce) the memoized value.
You’re not directly computing the value — you’re passing React the “recipe” for how to compute it.
✅ Normal function: you call it to do something right now.
✅ Factory function: you give it to someone (like React) so they can call it later when they need to make a value/object/function.
In the useMemo context
Normal function call inside render
Here the function runs every time the component re-renders:
import React from 'react';
function expensiveCalculation(n) {
console.log("Running expensiveCalculation...");
let total = 0;
for (let i = 0; i < n * 1_000_000; i++) {
total += i;
}
return total;
}
export default function Example({ n }) {
// ❌ runs on every render, even if n didn’t change
const result = expensiveCalculation(n);
return <p>Result is {result}</p>;
}
If Example re-renders for any reason, even if n didn’t change,
→ expensiveCalculation runs again (wasting CPU).
Factory function with useMemo
Here we give React a factory function (the recipe) and a dependency list:
import React, { useMemo } from 'react';
function expensiveCalculation(n) {
console.log("Running expensiveCalculation...");
let total = 0;
for (let i = 0; i < n * 1_000_000; i++) {
total += i;
}
return total;
}
export default function Example({ n }) {
// ✅ React only calls the factory function if `n` changes
const result = useMemo(() => expensiveCalculation(n), [n]);
return <p>Result is {result}</p>;
}
The () => expensiveCalculation(n) is the factory function.
React stores the result (result).
On the next render:
- If n is the same → React reuses the cached value, factory isn’t called.
- If n changes → React calls the factory again to make a new result.
Key difference
- Normal function call: you call the function yourself immediately.
- Factory function in useMemo: you give React the recipe, and React decides whether to call it or reuse the old value.
This content originally appeared on DEV Community and was authored by Cathy Lai
Cathy Lai | Sciencx (2025-09-18T17:35:40+00:00) Factory Functions in useMemo(). Retrieved from https://www.scien.cx/2025/09/18/factory-functions-in-usememo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.