我有一个顶级组件，它使用一个库来确定用户的浏览器是处于亮模式还是暗模式。然后它被用来设置应用程序的主题，其中包括HTML Canvas组件（这很重要，因为这些组件不像普通的React组件）。目前，画布组件在没有重新呈现（页面重新加载或开发模式下的热重新加载）的情况下不会显示正确的主题。
如何让App组件在不重新加载的情况下重新呈现？例如，在本地开发模式下，当我点击保存时，只有组件重新呈现，这正是我想在应用程序中复制的行为。
根据SO上的其他答案，useReducer是在功能组件中强制重新渲染的正确方法，但以下方法对我不起作用：

function App(props) {
  // this is not working 
  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);

  useEffect(() => {
    setDarkMode(getColorTheme() === "dark");
    // this is not working 
    forceUpdate();
  }, [getColorTheme()]);
}
  return (
    <div
      className={(darkMode ? "dark-mode-theme" : "")}
    >
      ...
    </div>
  )
}