Derive a local state in React - reactjs

Question

I would like to derive a local state in my React app and use it in the same component.
import * as React from 'react'
import * as ReactDOM from 'reactDOM'
function App(){
const [origins, setorigins] = React.useState([1, 45, 7, 11]) // source of truth
const [muted, setmuted] = React.useState([]) // derive from source
React.useEffect(() => {
evolve()
}, [origins])
// Transforms [23] => [{origin: 23, muted: 24}]
const evolve = () => {
setmuted(origins.map(o => ({origin: o, muted: o += 1})))
}
const addEntity = () => {
// add random integer between 1 and 45
const newEntity = Math.floor(Math.random() * 45 ) + 1
setorigins([...origins, newEntity])
}
return (
<>
<button onClick={addEntity}>Add entity random</button>
{muted.map(m => (
<div className="entity">
<p>Origin : {m.origin}</p>
<p>Muted: {m.muted}</p>
</div>
)) }
</>
)
}
ReactDOM.render(
<App />,
document.getElementById('reactz')
)
Can you improve this code above ?
Any performance issues I should be warned of ?

Answer 1

Definitely I was overthinking. The simpliest way IMO is to copy and transform the source of truth on the fly as described by Kent on his blog.
import * as React from 'react'
import * as ReactDOM from 'reactDOM'
function App(){
const [origins, setorigins] = React.useState([1, 45, 7, 11]) // source of truth
const muted = evolve(origins) // derived state (useMemo ?)
// Transforms [23] => [{origin: 23, muted: 24}]
function evolve(data) {
return data.map(o => ({origin: o, muted: o += 1}))
}
const addEntity = () => {
// add random integer between 1 and 45
const newEntity = Math.floor(Math.random() * 45 ) + 1
setorigins([...origins, newEntity])
}
return (
<>
<button onClick={addEntity}>Add entity random</button>
{muted.map(m => (
<div className="entity">
<p>Origin : {m.origin}</p>
<p>Muted: {m.muted}</p>
</div>
)) }
</>
)
}
ReactDOM.render(
<App />,
document.getElementById('reactz')
)
And for computational optimization, make use of useMemo hook.