React Reusable Utility Functions

Table of Contents +

In the last lesson, React Environment Variables, you moved config out of your code. Now let’s collect the small reusable utility functions your app uses everywhere, so they live in one tested place instead of being copied across components.

🤔 Why pull out utility functions?

Here’s the pain. Small helper logic gets copied into many components, and copies drift apart.

The same date-formatting code is written inline in five different components.
You fix a formatting bug in one, but forget the other four still have it.
Components get cluttered with little chunks of logic that aren’t really about the UI.
There’s no single, tested place for “how we format a price” or “how we capitalize a name”.

So utility functions let you write that small logic once and reuse it everywhere, one source of truth per helper.

🐍 What is a utility function?

Let’s define it simply.

A utility function is a small, reusable helper that does one job, like formatting or calculating.
It’s usually a pure function: same input always gives the same output, with no side effects.
It doesn’t touch React state or the screen; it just takes values in and returns a value out.

So a utility is plain JavaScript that any component can call. It’s not a component or a hook, just a helper that does one clean job.

🧩 Putting utilities in a utils folder

You collect these helpers in a dedicated folder, usually utils/, grouped by topic.

src/
  utils/
    formatDate.js
    formatCurrency.js
    capitalize.js

Here’s a couple of simple ones.

export function capitalize(text) {
  if (!text) return "";
  return text.charAt(0).toUpperCase() + text.slice(1);
}

// utils/formatCurrency.js
export function formatCurrency(amount) {
  return "$" + amount.toFixed(2);
}

Read what makes these good utilities.

Each does one clear thing: capitalize capitalizes a word, formatCurrency formats a number as money.
They take input and return output, with no React and no side effects.
They handle an edge case (empty text), so they’re safe to call anywhere.
They live in utils/, so any component can import and reuse them.

🖥️ Using a utility in a component

Now components import and call these instead of repeating the logic.

import { capitalize } from "../utils/capitalize";
import { formatCurrency } from "../utils/formatCurrency";

function ProductCard({ name, price }) {
  return (
    <div>
      <h3>{capitalize(name)}</h3>
      <p>{formatCurrency(price)}</p>
    </div>
  );
}

See how clean this is.

The component calls capitalize(name) and formatCurrency(price) instead of writing that logic inline.
If you ever change how prices are formatted, you change formatCurrency.js once and every component follows.
The component stays focused on layout, not on string and number details.

So the helper logic is written once, reused everywhere, and the components stay readable.

🧪 Pure functions are easy to test

A big bonus of pure utility functions is that they’re simple to test, because they have no React or side effects.

// you can test a utility with plain input and output
capitalize("alex");        // "Alex"
formatCurrency(9.5);       // "$9.50"

Why this matters.

A pure function always gives the same output for the same input, so a test is just “input X gives output Y”.
There’s no component to render, no state to set up; you just call the function and check the result.
So your most-reused logic is also your easiest to verify and trust.

Pure means predictable

A pure function doesn’t change anything outside itself and doesn’t depend on outside state. That makes it predictable, reusable, and easy to test. Aim for pure utilities whenever you can.

⚠️ Common Mistakes

A common mistake is repeating the same helper logic inline across components instead of extracting it.

// ❌ same formatting copied in many components - bugs drift apart
<p>{"$" + price.toFixed(2)}</p>   // in ProductCard
<p>{"$" + total.toFixed(2)}</p>   // in Cart, copied again

// ✅ one shared utility, used everywhere
<p>{formatCurrency(price)}</p>
<p>{formatCurrency(total)}</p>

Keep these in mind.

Don’t copy the same helper logic into many components. Extract it to utils/.
Don’t put React state or side effects in a utility; keep it pure. That logic belongs in a hook.
Don’t make a “misc” file of unrelated junk. Group utilities by topic with clear names.

✅ Best Practices

A few habits for utility functions.

Collect reusable helpers in a utils/ folder, grouped by topic with clear names.
Keep each utility small, pure, and focused on one job.
Use utilities for non-React logic (formatting, calculating); use custom hooks for React logic (state, effects).
Extract a utility when the same helper logic appears in more than one place.

Utilities vs hooks

Know the difference. A utility is plain logic with no React, like formatting a date. A custom hook is React logic with state or effects, like useFetch. If your helper needs useState or useEffect, it’s a hook, not a utility.

🧩 What You’ve Learned

✅ A utility function is a small, reusable helper that does one job, usually a pure function
✅ Pure means: same input gives the same output, with no side effects and no React
✅ Collect utilities in a utils/ folder, grouped by topic with clear names
✅ Components import and call them, so helper logic is written once and reused everywhere
✅ Pure utilities are easy to test: just check input gives the expected output
✅ Use utilities for non-React logic; use custom hooks for logic that needs state or effects

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

🚀 What’s Next?

Now your project is well-organized: folders, components, hooks, API calls, config, and utilities all have a clear home. To close the module, let’s gather the overall React best practices into one final checklist.

React Best Practices

Previous React Environment Variables Next React Best Practices

Share & Connect

Share on LinkedIn