Hot Updater
Guide
Guide

useHotUpdaterStore()

A store related to updates.

Download Progress

progress is a number representing the bundle download progress. It has a value between 0 and 1.

When isBundleUpdated is true, it means the bundle download is complete and the update will be applied when HotUpdater.reload() is called. The isBundleUpdated becomes true when the progress value reaches 1.

import { HotUpdater, getUpdateSource, useHotUpdaterStore } from "@hot-updater/react-native";
import { Button, Text, View } from "react-native";

function App() {
  const { progress, isBundleUpdated } = useHotUpdaterStore();

  return (
    <View>
      <Text>Hello World</Text>
      <Text>{Math.round(progress * 100)}%</Text>
      <Button
        title="Reload"
        onPress={() => HotUpdater.reload()}
        disabled={!isBundleUpdated}
      />
    </View>
  );
}

export default HotUpdater.wrap({
  source: getUpdateSource("<your-update-server-url>", {
    updateStrategy: "fingerprint", // or "appVersion"
  }),
  // If you need to send request headers, you can use the `requestHeaders` option.
  requestHeaders: {
    Authorization: "Bearer <your-access-token>",
  },
})(App);

Optimizing Renders with Selectors

You can optimize your component renders by using selectors to subscribe only to specific parts of the state. This prevents unnecessary re-renders when other parts of the state change.

import { HotUpdater, useHotUpdaterStore } from "@hot-updater/react-native";
import { Text } from "react-native";

function ProgressDisplay() {
  // Only re-renders when progress changes
  const progress = useHotUpdaterStore(state => state.progress);

  return <Text>{Math.round(progress * 100)}%</Text>;
}

function UpdateButton() {
  // Only re-renders when isBundleUpdated changes
  const isBundleUpdated = useHotUpdaterStore(state => state.isBundleUpdated);

  return (
    <Button
      title="Reload"
      onPress={() => HotUpdater.reload()}
      disabled={!isBundleUpdated}
    />
  );
}