import React, { StrictMode} from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");
function App({store, action}) {
return <>
<h1>{store.counter}</h1>
<button onClick={() => action(true, store)}>
increment
</button>
<button onClick={() => action(false, store)}>
decrement
</button>
</>
}
const store = {
counter: 0
}
const action = (bool, state) => {
state.counter = bool ? store.counter + 1 : store.counter - 1
}
ReactDOM.render(
<StrictMode>
<App store={store} action={action}/>
</StrictMode>,
rootElement
);
Without changing App function , store and action we have to update the value on DOM .
one solution that I know is : Adding **setInterval function , but this is not most optimized solution .
setInterval(()=>
ReactDOM.render(
<StrictMode>
<App store={store} action={action} />
</StrictMode>
);
,10);
Here is the codepen example for the same :
Codepen