Add hook for forcing a rerender in a component

1 files changed, 9 insertions, 0 deletions

diff --git a/gui/src/renderer/lib/utilityHooks.ts b/gui/src/renderer/lib/utilityHooks.ts
index 8c3925762e..81a5579dd6 100644
--- a/gui/src/renderer/lib/utilityHooks.ts
+++ b/gui/src/renderer/lib/utilityHooks.ts
@@ -69,3 +69,12 @@ export function useNormalBridgeSettings() {
   const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
   return bridgeSettings.normal;
 }
+
+// This hook returns a function that can be used to force a rerender of a component, and
+// additionally also returns a variable that can be used to trigger effects as a result. This is a
+// hack and should be avoided unless there are no better ways.
+export function useRerenderer(): [() => void, number] {
+  const [count, setCount] = useState(0);
+  const rerender = useCallback(() => setCount((count) => count + 1), []);
+  return [rerender, count];
+}