DEV Community

Cathy Lai
Cathy Lai

Posted on

Factory Functions in useMemo()

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
Enter fullscreen mode Exit fullscreen mode

Why use them?

  • ✅ Avoids new keyword
  • ✅ 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]);
Enter fullscreen mode Exit fullscreen mode

A normal function

Just does something when you call it.

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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>;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)