Sep 5, 2024

Immediate Mode vs Retained Mode UIs

Creating UIs can be done in many different ways, whether that is using a framework such as React for web development, or using Roblox Studio for creating UIs in games. Basically we have the tools to make any UI we'd like, but there are actually different modes these UIs are created and handled in.

Now if you understand the word 'immediate' it shouldn't be so hard to come up with an idea on what Immediate Mode UIs are; but if you don't know - let me explain. Dear ImGui is a very popular library for creating UIs in any program, being very integratable; which makes it ideal - it's immediate mode hence it's name 'ImGui' (immediate gui).

if (ImGui::Button("Hello, world!") {
  std::cout << "Hello, world!" << std::endl;
}

The opposite of ImGui could be Hikogui, a retained mode UI library. Let's start breaking them down now; in an Immediate Mode UI, every time the screen refreshes (typically at 60 times per second), the UI is drawn. Sounds quite inefficient right? But here's the great thing about it, it's amazing for dynamic interfaces where things constantly update.

It's super direct, which makes immediate mode UIs ideal for things like game development or any situation where the UI is always in flux.

However, retained mode UIs take a different approach. Once you tell the UI what to draw, it holds onto that information. You don't need to tell it again unless something changes - libraries such as React, for instance work this way - they 'retain' the UI state, making them awesome for apps where the UI doesn't change every second, but you still need flexibility and structure.

What ever you want to use entirely depends on your use case, try them both out and see what you prefer!