useRerenderOn

useRerenderOn makes this component render again when the client announces one of its ten occasions — a chat message arrived, a sub-interface opened.

useRerenderOn(occasion: EngineEvent, on?: Ref): void

Reference

useRerenderOn(occasion, on?)

src/reference-engine.ts2

export const ChatBadge = (): Component => {
  useRerenderOn(Engine.CHAT);
  const [seen, setSeen] = useState(0);

Parameters

• occasion: One of the ten Engine.* occasions.
• on: A ref naming the component the subscription lives on. Defaults to this component’s root.

Returns

Nothing. It takes no handler.

Caveats

• Reach for it when the repaint changes the tree’s shape — swapping one component for another, adding a row, changing what exists at all. A handler can set a text, a colour, a hide; it cannot make a component that is not there. When a handler can say it, use useWatch.
• A refusal about this component’s state can name this hook’s cell.
• It is the remedy TS2E228 points at.
• A host scrolled out of sight does not redraw until it scrolls back; put the hook on a host outside the scrolling layer.

	what happens
useWatch(Engine.X, handler)	your handler runs
useRerenderOn(Engine.X)	the whole render runs again

Usage

Redrawing when a message arrives

src/reference-engine.ts2

  useRerenderOn(Engine.CHAT);

Naming which component carries it

src/reference-lifecycle.ts2

  const universe = useUniverse();
  useOnResize(universe);

useOnResize re-renders when resizing the game window changes the named component’s size.