State Management

this guide introduces state , explains how it works in ir engine, and covers different approaches to managing local and global state introduction state management is a fundamental concept in programming, allowing applications to store and modify data over time in ir engine, managing state efficiently ensures components interact smoothly and maintain consistent behavior understanding state state allows applications to store and update data dynamically, ensuring that components can react to changes over time let's explore what state is and how it works in ir engine what is state? state https //en wikipedia org/wiki/state (computer science) refers to information that a program retains and updates as it runs it allows the application to remember past actions and maintain continuity for example, to track elapsed time in an application, we could store a variable that updates every second let seconds = 0; this variable acts as state , representing the number of seconds elapsed naming it descriptively, such as clockseconds , improves readability a common example in ir engine is using a state variable like initialized to ensure some code runs only once let initialized = false; function hello() { if (initialized) return; initialized = true; // initialization logic } local vs global state state can be categorized as local or global , depending on its accessibility the table below outlines the differences type of state description local state exists only within a specific component or module global state can be accessed and modified across multiple components local state in ir engine local state exists within a single component or module and is not shared across different parts of the application understanding scope is key to using local state effectively scope and module local variables scope https //en wikipedia org/wiki/scope (computer science) defines where a variable is accessible in a program module scope a variable is only available within the file it is declared in component scope a variable is accessible inside a component where it is defined initially, we used module scope in the hello world tutorial docid\ ydhrvx znrogkmzf21s41 let initialized = false; function hello() { if (initialized) return; } later, we moved the variable into a component export const hellocomponent = definecomponent({ oninit () => ({ initialized false }), }); this change made initialized local to the component instead of the module global state in ir engine global state allows multiple parts of an application to share and modify the same data, making it useful for complex applications unlike local state, it persists beyond a single module or component what is global state? global state allows multiple parts of an application to share and modify the same data this eliminates prop drilling —the practice of passing data through multiple components managing global state in react react provides the context api https //react dev/learn/passing data deeply with context for managing global state however, ir engine introduces hyperflux , which is optimized for handling state in real time applications state management approaches in ir engine ir engine provides several ways to manage state, each suited for different use cases the table below outlines the main approaches method use case local variables suitable for tracking state within a single module or component hyperflux the preferred method for managing global state in ir engine reactors ( useeffect ) used to trigger updates when state changes using local variables local variables allow components to store data internally however, they have limitations their scope determines accessibility they do not persist across component unmounts they require manual updates hyperflux ir engine’s state management system hyperflux is a powerful state management system in ir engine, allowing applications to handle real time updates efficiently it is designed to manage asynchronous state changes across different components hookstate a simplified state management tool hookstate https //hookstate js org/ is a lightweight state management library used in react applications ir engine leverages hookstate for managing state efficiently a hookstate variable is created using usestate const mystate = usestate(0); hookstate variables have get() reads the current value set() updates the value merge() combines new data with the existing state defining state with hyperflux hyperflux provides a structured way to manage global state in ir engine the following example defines a global state for tracking spawned and destroyed entities const basicstate = definestate({ name 'ee basic basicstate', // unique identifier for this state initial {} as record\<entityuuid, {}>, // initial state an empty object that maps entity uuids to their state receptors { onspawnaction basicactions spawnaction receive((action) => { const state = getmutablestate(basicstate); // access global state state\[action entityuuid] merge({}); // initialize state for the new entity }), ondestroyobject worldnetworkaction destroyobject receive((action) => { const state = getmutablestate(basicstate); // access global state state\[action entityuuid] set(none); // remove state for the destroyed entity }) } }); how it works global state definition definestate creates a global state container accessible throughout the application state initialization the initial property starts as an empty object, mapping entity uuids to their respective states receptors handle updates onspawnaction listens for entity spawns and initializes their state ondestroyobject listens for entity destruction and removes them from state this approach ensures efficient state tracking by dynamically updating global state based on entity events, reducing the need for manual state management reactors and useeffect reactors are used in ir engine to track and respond to state changes, similar to react’s useeffect https //react dev/reference/react/useeffect hook useeffect executes side effects when a component renders mounts for the first time reacts to a dependency change in ir engine, reactor mounts serve a similar function, ensuring state updates are handled efficiently ➡️ next steps