Reactivity

Make your app truly interactive

Till now, we saw how we can build UI using Bolt, but it was not dynamic, and it will not change if the used does something. So, we need to do something to make sure the UI itself reacts to changes, like updating of state.

States

A state is a variable that can store values, and will also update the UI if the value was changed.

Bolt has a built-in State API, the State() function, which will help in creating the state for an UI. The state function takes in one variable, that is the initial or starting state of the UI, then the state returns an object with three methods:

• update(value): Sets a new state

• get(): Gets the current state

• onUpdate(callback): This function takes another function, and calls that function when the state is updated.

Bolt has selective state updates, that means if the state was updated, it will not update anything unless we bind the state to the component we want to update when the state changes, and here comes the Component() function.

The Component function takes in a function, and that function MUST return a HTML component, then it takes the states that it depends upon.

Too complicated? Let's cover one thing after another.

Let's create a simple function as we would do when creating a new custom component

function MyComponent() {
    return div(
        attribute(input(), {
            type: "text"
        })
    )
}

render("app", MyComponent())

Here we created a component that would show a text input. But this is not doing anything as such. We want to store the data the user types in the input box.

Now if I recall, we have an event called input that will be fired whenever the user types anything on the input box. Let's add that event then

function MyComponent() {
    return div(
        oninput(
            attribute(input(), {
                type: "text"
            }),
            (e) => {
                console.log(e.target.value)
            }
        )
    )
}

render("app", MyComponent())

To check, we will render this component using the render function and open the developer tools > console. There you must see the values of the text box logged as you continue to type in it. That means we must store this value to a state.

To store the value, we will use state, to make sure our UI updates whenever the state is changing

function MyComponent() {
    
    const userInput = State("") //empty state for now

    return div(
        oninput(
            attribute(input(), {
                type: "text"
            }),
            (e) => {
                //updating the value of the state
                userInput.update(e.target.value)
            }
        )
    )
}

render("app", MyComponent())

Now let's create a paragraph to show the text the user is typing

function MyComponent() {
    
    const userInput = State("") //empty state for now

    return div(
        oninput(
            attribute(input(), {
                type: "text"
            }),
            (e) => {
                //updating the value of the state
                userInput.update(e.target.value)
            }
        ),
        p(userInput.get())
    )
}

render("app", MyComponent())

But nothing is happening! If you recall, I said that Bolt uses selective updates using Component function. So for the paragraph to update it's text, we need to tell Bolt to update it, and we can do so by wrapping the paragraph function inside the Component function as a callback, and also binding the state that we want to re-render when updates

function MyComponent() {
    
    const userInput = State("") //empty state for now

    return div(
        oninput(
            attribute(input(), {
                type: "text"
            }),
            (e) => {
                //updating the value of the state
                userInput.update(e.target.value)
            }
        ),
        Component(_ => p(userInput.get()), userInput)
    )
}

render("app", MyComponent())

Now it must work, and the best part is only the p tag is getting re-rendered, and the entiere app is unaffected by this. This selective updating based on states is useful to make sure your app does not do unnecessary updates.

The Component() function returns a div element, and therefore it can be used inside of HOCs and can be nested.

There is no restriction in keeping the state outside the function, just make sure it is accessible. The state, regardless of how it was recieved will work flawlessly. States can be passed to other components as props as well, and then can be used to bind to a Component.

This can be daunting at first, but I have created some examples where you have to build complex apps, and there you will learn even more ways to use Bolt and it's seemingly infinite variations.

Conditional Rendering

Sometimes, just showing states is not enough, and you need to show the data based on some other criterias, and you may need to use conditional rendering.

There are a lot of ways you can do conditional rendering in Bolt, some simple while some dauting, but we will cover the two of the most efficient ones which you can use.

To give a overview, let's take the app we made above, and create a condition that if the length of the input is greater than 5, then only we will show it, otherwise we will show "Not Big Enough"

Using self-invoking function

We can declare a function and call it on the go right there without really creating a function and storing it somewhere.

A self-invoking function looks somewhat like this:

(() => {
    console.log("Hello World")
})() //self invoked

To learn more about self-invoking functions, visit: https://developer.mozilla.org/en-US/docs/Glossary/IIFE

Now let's implement our app using this feature

function MyComponent() {
    
    const userInput = State("") //empty state for now

    return div(
        oninput(
            attribute(input(), {
                type: "text"
            }),
            (e) => {
                //updating the value of the state
                userInput.update(e.target.value)
            }
        ),
        Component(_ => 
        (() => {
            if ( userInput.get().length > 5 ) {
                return p(userInput.get())
            } else {
                return p("Not Big Enough")
            }
        })(), userInput)
    )
}

render("app", MyComponent())

Using Bolt's way

The above code was really bad. Too hard to read and to get an idea of what is exactly going on. Bolt's way is a lot more readable and better than the above example.

The When() function is used to achieve the same result, except without all the hassle as above. The same code can be re-written as such:

function MyComponent() {
    
    const userInput = State("") //empty state for now

    return div(
        oninput(
            attribute(input(), {
                type: "text"
            }),
            (e) => {
                //updating the value of the state
                userInput.update(e.target.value)
            }
        ),
        Component(_ => 
        When(userInput.get().length > 5, 
            p(userInput.get()),
            p("Not Big Enough")
        ), userInput)
    )
}

render("app", MyComponent())

The When() function takes three input, the first argument is the condition, the second argument is the value if the condition was true, and the third value if the condition was false.

When() function is nestable with other Whens, components, and even HOCs like ids.

Loops

Sometimes, you need create some component that could dynamically load data from an array or object, so you might loop the component to display each element properly.

Looping over arrays

Looping over arrays means that we loop over a given array, use each element and create a component for that specific element, and then return the element. We will use the built-in javascript methods:

• array.map()
• array.filter()

Now, I am not going into details, so I have linked their docs, but we know that these functions will return an array, but to be used as component, we need to have component, hence we will use the spread operator.

Let's see some example:

//say I have the following data
var users = [
    {
        name: "Mayukh",
        age: 17
    },
    {
        name: "Bolt",
        age: 0
    }
]

Now let's say I have a component that takes name and age and shows us them in the view:

function Users(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

Let's combine the above two using the .map() function and show them on the UI

var dashboard = div(
    h1("Dashboard"),
    p("User details: "),
    ...users.map(user => Users(user.name, user.age))
)

render("app", dashboard)

Note: You can use this system for stateful data as well, and whenever the stateful array will be updated, so will this one

Looping over objects

Looping over objects are very slow, since we might need to re-iterate the keys and get their corresponding values, and then we will get the component ready, so unless it is not possible, avoid iterating objects

This time also, we will use a javascript function to loop over

• Object.keys()

Now I will not go into details, but this function returns an array of keys of the object, that means we need to further iterate it using .map(), and then we have to access the value at that key in the object and return a component.

Let's see a simple example:

let data = {
    name: "Mayukh",
    age: 17
}

var ObjectData = div(
    ...Object.keys(data).map(key => p(`${key}: ${data[key]}`))
)

render("app", ObjectData)

And there you have it! Congrats on reading through the Reactivity portion. This was a huge portion and I guess boring too, but you now know 90% of the entiere ecosystem of Bolt, and can start making apps.

There are two more advanced topics left, lifecycle and routing, and those are for quite complex use cases, though I would suggest learning routing too!