Comment on page

Getting updates

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.

Listen for updates in the browser

By default, the SDK doesn't listen for updates when used in the browser so you'll need to refresh the page to see any changes to your flag logic.
You can manually enable listening for updates by passing the shouldListenForUpdates option in the call to initializeHypertune:
import { initializeHypertune } from "./generated/generated";
const hypertune = initializeHypertune({}, {
token: process.env.REACT_APP_HYPERTUNE_TOKEN,
shouldListenForUpdates: true,
export default hypertune;

Manually trigger updates

You can manually trigger and wait for server re-initialization with hypertune.initFromServerIfNeeded():
import hypertune from "./hypertune";
export default async function ServerExample() {
await hypertune.initFromServerIfNeeded();
const rootNode = hypertune.root({
context: {
user: { id: "test_id", name: "Test", email: "[email protected]" },
const exampleFlag = rootNode.exampleFlag().get(/* 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: (newCommitHash: string) => void)
hypertune.removeUpdateListener(listener: (newCommitHash: string) => void)
You can also get the current commit hash with:
hypertune.getCommitHash(): 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 [, setCommitHash] = React.useState<string | null>(
useEffect(() => {
return () => {
}, []);
// Return the Hypertune root node initialized with the current user
return useMemo(
() =>
context: {
user: { id: "test_id", name: "Test", email: "[email protected]" },