Getting updates

By default, SDKs listen for updates to your flag logic in the background. When you save and activate a new commit from the Hypertune UI, SDKs will fetch your new flag logic and use it on the next flag evaluation.

You can manually disable listening for updates by setting the initIntervalMs option to 0 in the call to initHypertune:

import { initHypertune } from "./generated/hypertune";

const hypertune = initHypertune({}, {
  token: process.env.REACT_APP_HYPERTUNE_TOKEN!,
  initIntervalMs: 0,
});

export default hypertune;

The default value of initIntervalMs is 1000 so the SDK checks for updates every second. You can increase this value to check for updates less frequently.

Manually trigger updates

You can manually trigger and wait for server re-initialization with hypertune.initIfNeeded():

import hypertune from "./hypertune";

export default async function ServerExample() {
  await hypertune.initIfNeeded();

  const rootNode = hypertune.root({
    args: {
      context: {
        user: { id: "test_id", name: "Test", email: "[e-mail]" },
      },
    },
  });

  const exampleFlag = rootNode.exampleFlag({ fallback: false });

  return (
    <div>Server Component flag: {String(exampleFlag)}</div>
  );
}

This will only trigger a new server initialization if the last one was over a second ago so you can call this on every backend request to ensure flag values are fresh while minimizing network latency and bandwidth.

This is particularly useful in serverless environments, e.g. Vercel deployments, where background SDK tasks like fetching updates aren't guaranteed to execute.

Subscribing to updates

You can add and remove listeners to be notified of updates with:

hypertune.addUpdateListener(listener: (newStateHash: string) => void)
hypertune.removeUpdateListener(listener: (newStateHash: string) => void)

You can also get the current state hash with:

hypertune.getStateHash(): string | null

You can use these methods to build a useHypertune() hook for your React frontend, that returns the Root SDK node and tracks the current commit hash in its state to trigger a re-render after an update:

import React, { useEffect, useMemo } from "react";
import hypertune from "./hypertune";

export default function useHypertune() {
  // Trigger a re-render when flags are updated
  const [, setStateHash] = React.useState<string | null>(
    hypertune.getStateHash(),
  );
  useEffect(() => {
    hypertune.addUpdateListener(setStateHash);
    return () => {
      hypertune.removeUpdateListener(setStateHash);
    };
  }, []);

  // Return the Hypertune root node initialized with the current user
  return useMemo(
    () =>
      hypertune.root({
        args: {
          context: {
            user: { id: "test_id", name: "Test", email: "[e-mail]" },
          },
        },
      }),
    [],
  );
}