Derived values about radioactive-state

[MananTank]

Yep, It's definitely possible to add computed fields.

But the thing is you don't actually need computed states in React since updating the state re-runs the component, so you can just have a plain variable/constant that computes the value out of the state, on a given re-render

// radiaoctive-state in react

// state
const state = useRS({
 count: 0
})

// computed state
const doubleCount = state.count * 2

Computed states are required on hyper-efficient frameworks that do not re-run the component when the state is updated.
Take nue.js for example - it's a reactive framework I'm working on which has the same core idea as this library

you can check out a simple nuejs app that shows usage of computed state here: https://codepen.io/MananTank/pen/NWbRzvX?editors=1010

Here's how nuejs does the "computed state" business:

// nue.js
$.count = 0
$.doubleCount = () => $.count * 2

In nuejs, A simple reactive state is a value and a computed state is a function.
when nuejs initializes the state - it runs the computed state's function in "spy mode" which detects what parts of the state is being used to calculate the computed state and then computed state subscribes to those parts - so that whenever they are updated - its value is recomputed. (here in this example $.doubleCount will be recomputed whenever $.count is updated)

This kind of computed state logic is required in nue.js because it is template-based, you can't embed javascript expressions in it, so we have to have a computed state to allow having expressions

But in React, we write JSX, and since you can embed js expressions directly inside JSX and everytime the state is updated the component re-runs - no need to have a computed state.

Hope this answers your question ;)

[thelinuxlich]

What if you only use the derived values in the state? Also, if you componentize a lot, subcomponents won't rerender as much as the root one

[thelinuxlich]

Also, if derived state is useless, why mobX and React-Easy-State implements it?

[MananTank]

I'm not saying that derived state is useless, I'm saying it's not necessary in vanilla React, but if you are using a global state management library where a piece of state could be updated in any component - in that case, we would have to have derived/computed state.

But in the case of radioactive-state - it's not a global state-management library - it's just a local state management hook. state it produces will only be used and updated by itself (and its children - still a single root) and whenever the state is updated - the component where the state was created (root component) is rerendered - this removes the need to detect the state change and update some other piece of state.

Also, if you componentize a lot, subcomponents won't rerender as much as the root one

I'm not sure what you mean by this, subcomponents would render the same amount as the root one.

[thelinuxlich]

Hmm I thought react had a internal smart cache to avoid rerender of subcomponents uselessly

[MananTank]

You could use React.memo for that https://reactjs.org/docs/react-api.html#reactmemo

[thelinuxlich]

https://overreacted.io/before-you-memo/

[thelinuxlich]

But yeah, now I understand the purpose of radioactive-state.