Dependencies

Why you might need this

Sometimes showing the right content requires more than just a value. You might need to:

Format a date in a specific way
Calculate something based on user timezone
Transform data before displaying it

The deps option lets you include your own helper functions that run as part of the prehydration.

Basic Usage

import { prehydrate } from 'prehydrate';

function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(amount);
}

const { Prehydrate, bind } = prehydrate({
  key: 'price-display',
  initialState: 99.99,
  deps: {
    formatCurrency,
  },
});

What happens behind the scenes

Your functions get embedded directly into the page as inline JavaScript. This means they run immediately — no waiting for React or any other scripts.

Here's what the generated code looks like:

(function() {
  const formatCurrency = function formatCurrency(amount) {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(amount);
  };
  const __initialState = 99.99;
  // ... DOM manipulation code using formatCurrency
})();

What you can include

Functions

Most JavaScript functions work out of the box:

Arrow functions, named functions, and methods (as standalone functions) all work.

Important: Functions must be self-contained. They can't use variables or imports from your React code — only what you explicitly pass in deps.

// Works
const add = (a: number, b: number) => a + b;
deps: { add }

// Also works
function multiply(a: number, b: number) {
  return a * b;
}
deps: { multiply }

// Does NOT work - references external variable
const TAX_RATE = 0.08;
const addTax = (price: number) => price * (1 + TAX_RATE);
deps: { addTax } // TAX_RATE will be undefined!

// Fix: include TAX_RATE in deps
deps: {
  TAX_RATE: 0.08,
  addTax: (price: number, taxRate: number) => price * (1 + taxRate),
}

Constants

Any JSON-serializable value can be included:

deps: {
  TIMEZONE: 'America/New_York',
  COLORS: ['red', 'green', 'blue'],
  CONFIG: { theme: 'dark', locale: 'en-US' },
}

Real-World Examples

Traffic Light with Helper Function

function getLights(state: 'red' | 'orange' | 'green') {
  return [
    { color: 'red', active: state === 'red' },
    { color: 'orange', active: state === 'orange' },
    { color: 'green', active: state === 'green' },
  ];
}

const { Prehydrate, bind } = prehydrate({
  key: 'traffic-light',
  initialState: 'orange',
  deps: { getLights },
});

Formatting with Locale

const LOCALE = 'en-US';

function formatDate(date: Date, locale: string): string {
  return date.toLocaleDateString(locale, {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });
}

const { Prehydrate, bind } = prehydrate({
  key: 'date-display',
  initialState: () => new Date(),
  deps: {
    LOCALE,
    formatDate,
  },
});

Naming rules

Keep names simple — they become JavaScript variables:

Valid names: formatTime, _helper, $config

Invalid names: format-time (hyphens not allowed), 123abc (can't start with number)

// This will throw an error:
deps: {
  'format-time': formatTime, // Invalid name!
}

Something not working?

View the page source to see exactly what code got generated. Look for:

Is your function there?
Does it look like valid JavaScript?
Are there any undefined values where you expected data?

<!-- View page source to see -->
<script>
  (function() {
    const myHelper = function myHelper(x) { return x * 2; };
    const CONFIG = {"key":"value"};
    // ...
  })();
</script>

On this page