# State and Props

Main 'state' object \`initialStateObj', which sets initial conditions and contains all subsequent data and UI config info. Currently everything is considered 'state' but it may become sensible to follow the [React approach](https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props) and separate out local data as 'props' - things that don't really change or that can be locally derived from state. This might simplify the state object.

* This object is sent to the Pug script as data to drive creation of the html. All variables referenced in the Pug script come from this object
* Interaction control for the UI happens in 3 ways, all regulated by the Hyperapp framework. The 3 options are registered with Hyperapp, which controls execution of UI events and the link to application "State"
  * Actions
    * Functions that deal with instant things, like responding to button clicks or receiving http data § If the result of a button click requires time, avoid blocking everything up by waiting and use an Effect (as below)
  * Effects
    * These are functions which deal with slow things, like requesting data from elsewhere on the web or typically in case of Resource Planner sending or requesting data to the server API § An effect function will have an associated Action function (1 or more), which it can call when the effect completes - e.g. receive server data. The Action triggered can use the received data or display an error
  * Subscriptions
    * These manage event listeners, such as a PWA push and online status changes § Each subscription is also associated with its own Action function that is called when the specified event happens
* State is a flexible concept which contains data used to define the UI and potentially store user inputs. The data can be numbers, text, functions (e.g. Actions) etc. The content of State is available to the UI, and changes to the UI affect State and vice versa. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://johnkazer.gitbook.io/core-web-dev-concepts/app/state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.