starred/opentui

Fork 0

mirror of https://github.com/anomalyco/opentui.git synced 2026-04-25 13:06:00 +03:00

[GH-ISSUE #131] Changing variables not re-rendering #30

New issue

Closed

opened 2026-03-02 23:43:59 +03:00 by kerem · 4 comments

kerem commented

2026-03-02 23:43:59 +03:00

Owner

Originally created by @k2on on GitHub (Sep 3, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/131

Originally assigned to: @msmps on GitHub.

I am trying to use Zero Sync Engine like this:

import { useQuery, useZero, ZeroProvider } from "@rocicorp/zero/react";
import { schema, Schema } from "./schema";

function App() {
  const z = useZero<Schema>();
  const [messages] = useQuery(z.query.message);

  return (
    <box>
	{messages.map(m => <box>
	  <text>{m.body}</text>
	</box>)}
    </box>
  )
}

This code works using ink, but not with OpenTUI.

However, this does work with OpenTUI when I add some other state, such as this

import { useQuery, useZero, ZeroProvider } from "@rocicorp/zero/react";
import { schema, Schema } from "./schema";

function App() {
  const z = useZero<Schema>();
  const [messages] = useQuery(z.query.message);

  // adding this will fix it
  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCount) => prevCount + 1)
    }, 60)
    return () => clearInterval(interval)
  }, []);

  return (
    <box>
	{messages.map(m => <box>
	  <text>{m.body}</text>
	</box>)}
    </box>
  )
}

Any idea on why messages wouldn't rerender by itself?

Thanks for the help,
Max

Originally created by @k2on on GitHub (Sep 3, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/131 Originally assigned to: @msmps on GitHub. I am trying to use [Zero Sync Engine](https://zero.rocicorp.dev) like this: ```tsx import { useQuery, useZero, ZeroProvider } from "@rocicorp/zero/react"; import { schema, Schema } from "./schema"; function App() { const z = useZero<Schema>(); const [messages] = useQuery(z.query.message); return ( <box> {messages.map(m => <box> <text>{m.body}</text> </box>)} </box> ) } ``` This code works using [ink](https://github.com/vadimdemedes/ink), but not with OpenTUI. However, this does work with OpenTUI when I add some other state, such as this ```tsx import { useQuery, useZero, ZeroProvider } from "@rocicorp/zero/react"; import { schema, Schema } from "./schema"; function App() { const z = useZero<Schema>(); const [messages] = useQuery(z.query.message); // adding this will fix it useEffect(() => { const interval = setInterval(() => { setCounter((prevCount) => prevCount + 1) }, 60) return () => clearInterval(interval) }, []); return ( <box> {messages.map(m => <box> <text>{m.body}</text> </box>)} </box> ) } ``` Any idea on why messages wouldn't rerender by itself? Thanks for the help, Max

kerem

2026-03-02 23:43:59 +03:00

closed this issue
added the
bug

react
labels

kerem commented

2026-03-02 23:44:00 +03:00

Author

Owner

@msmps commented on GitHub (Sep 3, 2025):

I will look into this! It looks like the useQuery(z.query.message); hook is not triggering a re-render in this specific scenario which is odd 🤔

A quick (although not ideal) workaround would be to hand over control of the rendering loop to opentui by setting the live prop on the parent <box>

@msmps commented on GitHub (Sep 3, 2025): I will look into this! It looks like the `useQuery(z.query.message);` hook is not triggering a re-render in this specific scenario which is odd 🤔 A quick (_although not ideal_) workaround would be to hand over control of the rendering loop to opentui by setting the `live` prop on the parent `<box>`

kerem commented

2026-03-02 23:44:00 +03:00

Author

Owner

@k2on commented on GitHub (Sep 3, 2025):

Ok, thanks for looking into this. I would love to switch over from Ink so getting this to work with zero would be really huge. Thanks for the help.

@k2on commented on GitHub (Sep 3, 2025): Ok, thanks for looking into this. I would love to switch over from Ink so getting this to work with zero would be really huge. Thanks for the help.

kerem commented

2026-03-02 23:44:00 +03:00

Author

Owner

@remorses commented on GitHub (Sep 3, 2025):

Probably an issue with useSyncExternalStore

github.com/rocicorp/mono@cbdfefe899/packages/zero-react/src/use-query.tsx (L82)

@remorses commented on GitHub (Sep 3, 2025): Probably an issue with useSyncExternalStore https://github.com/rocicorp/mono/blob/cbdfefe899f984c82d07aeb414d43981fb33b048/packages/zero-react/src/use-query.tsx#L82

kerem commented

2026-03-02 23:44:00 +03:00

Author

Owner

@msmps commented on GitHub (Sep 3, 2025):

Probably an issue with useSyncExternalStore

github.com/rocicorp/mono@cbdfefe899/packages/zero-react/src/use-query.tsx (L82)

this is the outcome i had landed on (for now) will investigate in the coming days

@msmps commented on GitHub (Sep 3, 2025): > Probably an issue with useSyncExternalStore > > https://github.com/rocicorp/mono/blob/cbdfefe899f984c82d07aeb414d43981fb33b048/packages/zero-react/src/use-query.tsx#L82 this is the outcome i had landed on (_for now_) will investigate in the coming days

kerem referenced this issue

2026-03-02 23:45:32 +03:00

[PR #30] [MERGED] Rename positionType to position to be more in line with CSS #233

kerem referenced this issue

2026-03-14 09:13:46 +03:00

[PR #30] [MERGED] Rename positionType to position to be more in line with CSS #1016