Example: Mimic useEffect

In this next example we we want to mimic React's useEffect Hook which is used to trigger certain functions only on the first render or only when certain state variables change.
With RobJS we can achieve this behaviour in a very straight forward way and it is even more versatile.

1. Start with the usual index.html-file where you define a div-Tag with an id of your choice.

    
<!-- index.html -->
<div id='myapp'></div>
<script type='module' src='app.js'></script>
    
    

2. In app.js, we set up our project as usual.
Additionally to two state variables, we also create a non state variable called firstRender that we attach to an empty object named similar to our component.

    
// app.js
import { RobJSApp } from './Rob.js'
import { MimicUseEffect } from './MimicUseEffect.js'

const app = new RobJSApp('myapp')
app.init('app')

app.defineStateVar('count', 0);
app.defineStateVar('count2', 0);
app.registerComponent(MimicUseEffect, 'mue1', ['count', 'count2'])
app.MimicUseEffect = {}
app.MimicUseEffect.firstRender = true

app.initialRender(MimicUseEffect, 'mue1')
    
    

3. In our component MimicUseEffect we check the value of the firstRender variable and set it to false immediately after the component function runs for the first time.
Further we can make the color of the element change when only count is equal to 3 (similar to conditional style rendering) but as we also have access to the old state, we can decide that we just want to do certain things when a certain state variable changes.

    
// MimicUseEffect.js

export const MimicUseEffect = (id) => {

    const createRandomColor = () => {
      return '#' + Math.floor(Math.random()*16777215).toString(16)
    }

    if(app.MimicUseEffect.firstRender){
      console.log('I only run on first render.')
      app.state.style = 'background-color: ' + createRandomColor()
      app.MimicUseEffect.firstRender = false
    }
    
    if(app.state.count === 3){
      console.log('I only run when count is 3.')
      app.state.style = 'background-color: ' + createRandomColor()
    }

    if(app.oldState.count2 !== app.state.count2){
      console.log('I only run when state of count 2 changes.')
      app.state.style = 'background-color: ' + createRandomColor()
    }


    return `
        <div id=${id}>
          <span style='${app.state.style}'>Random Color</span>
          Count 1:
          <button type='button' onclick='app.updateState("count", app.state.count - 1)'>-</button>
          ${app.state.count}
          <button type='button' onclick='app.updateState("count", app.state.count + 1)'>+</button>
          Count 2:
          <button type='button' onclick='app.updateState("count2", app.state.count2 - 1)'>-</button>
          ${app.state.count2}
          <button type='button' onclick='app.updateState("count2", app.state.count2 + 1)'>+</button>
        </div>
    `
};
    
    

4. With a bit of styling it looks and works like this.