[ Proposal ] - Effect helper

[Javiani]

This proposal is about an Idea I took from React and Solidjs.
The idea is to create a effect helper that will register a function callback that will be executed after every state.set call, or in other words, after the state is changed.

---

Use Case

The example below shows a pretty common case where you want to save some information or send it to an api call when state is changed.

export default function myComponent ({ main, state, effect }) {

    main(_ => [
        events
    ])

    const events = ({ on }) => {
        on('click', 'button', onclick)
        on('submit', 'form', onsubmit)
    }

    const onclick = () => {
        state.set({ dataSaved: true })
    }

    const onsubmit = (e) => {
        const formData = new FormData(e.target)
        state.set({ formData })
    }

    effect( _ => {
        const { dataSaved, formData } = state.get()
        const data = JSON.stringify({ dataSaved, formData })
        localStorage.setItem('my-app', data)
    })
}

Pros

1. It separates side effects from other parts of the code and keep them in the same place.
2. Avoid code duplication, if you have to execute some sort of task after state changes in the current version, you have to copy and paste your code imediately after all your state.set calls.

Cons

1. It can lead programmer to create infinite loops in case of misusing this feature, like having a state.set calls inside an effect function.
2. It can add potential bugs to the program flow, because you might not want to execute that effect function for every situation. The code can get more complex because the straighfoward way to solve that is by adding if and else branches inside effect function.

[Javiani]

No reason why to complicate like this, and also I'm wondering if this is somehow falling into the same issues that modern frameworks creates for themselves.