State

State is current data which is liable to change based on predefined or user interactions. In $render, state is declared with a normal JavaScript variable with an assigned value. There are two kinds of state -- unit and composite state.

Unit state

It is a state that represent a property of an entity (an app, a module, a class, a function or a component).

const color = 'blue';

Composite state

It is a state declaration to represent every property of an entity (an object, an app or a component). An object is used for a composite state in Javascript to contain all properties needed in the component.

const person = {
    name: 'Doe',
    age: 89,
    nationality: 'German'
    address: { city: 'New York'}
}

State can be viewed in two context in $render -- app and component contexts.

State in a local component context

A component state is the current or latest data of the component. Components in $render can use unit and composite state.

• Unit state in a $render component

Unit state is used in a component when a component has only one view property.

const Count = (count = 0) {
  //component body 
}

You can declare your state in unit like above.

It suitable when you only need to pass one property around for re-rendering.

• Composite state in a $render component

Composite state is used in a component when a component has many view properties.

const MovingDot = (coordinates = { x:0, y:3 }) {
 // code
}

or

const MovingDot = ({ x=0, y=3 } = {}) {
 // code
}

• Playground

Composite state is suitable when you have to pass many properties around for re-rendering.

State in the global scope

A global state is the current or latest data of an app that is accessible to all parts of the app. A global state can be used from anywhere in an application.

In $render, you can use $state() in any component to access the state of you application. Learn more (opens in a new tab).

Global component context.

It is state of a component stored in a global state but only accessible by the component and any component that subscribes to the context.

In $render, you can use createContext() and useContext() in any component to create and access a global component context. Learn more (opens in a new tab)

In short, the global component context is like the React context but with a twist.

State is created within a component or global scope and it can be passed down to children components as props, in short, for properties.