I would have to implement a separate query method
Something along the lines of this:
// src/components/use-app.ts import { useContext, useEffect, useState, useRef } from 'react'; import { getContext } from './island-context'; import type { App } from '../app/create-app'; type ContextRef = React.MutableRefObject<React.Context<App> | null>; const getAppContext = (contextKey: string, ref: ContextRef) => ref.current == undefined ? (ref.current = getContext(contextKey)) : ref.current; const advance = (current: number): number => current < Number.MAX_SAFE_INTEGER ? current + 1 : 0; function useApp(contextKey: string) { const ref: ContextRef = useRef(null); const app: App = useContext(getAppContext(contextKey, ref)); const [, forceRender] = useState(0); useEffect(() => { return app.listen(() => { forceRender(advance); }); }, [app]); return app; } export { useApp };
i.e. useState() is only used to force a render…
useState()
// src/components/CounterUI.ts import React from 'react'; import { useApp } from './use-app'; type CounterUIProps = { appContextKey: string; }; function CounterUI({ appContextKey }: CounterUIProps): JSX.Element { const app = useApp(appContextKey); return ( <div className="counter"> <button onClick={app.decrement}>-</button> <pre>{app.count}</pre> <button onClick={app.increment}>+</button> </div> ); } export { CounterUI as default };
…while the app properties and methods are used to obtain the render values (ignoring the contents managed by useState() entirely).
app
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Something along the lines of this:
i.e.
useState()
is only used to force a render……while the
app
properties and methods are used to obtain the render values (ignoring the contents managed byuseState()
entirely).