import './index.html';
import './index.global.css';
import * as ReactDOM from 'react-dom';
import * as React from 'react';
var A: React.FC<{ v: number, setV: React.Dispatch<React.SetStateAction<number>> }> = ({ v, setV }) => {
const [ s, setS ] = React.useState(v - 1);
var ch = React.useCallback((e: React.SyntheticEvent<HTMLInputElement>) => {
setS(parseInt(e.currentTarget.value) || 0);
}, [ ]);
React.useEffect(() => {
setS(v - 1);
}, [ v ]);
React.useEffect(() => {
setV(s);
}, [ s ]);
return < >
<input type="text" value={s} onChange={ch} />
</>
}
var B: React.FC<{ v: number, setV: React.Dispatch<React.SetStateAction<number>> }> = ({ v, setV }) => {
const [ s, setS ] = React.useState(v + 1);
var ch = React.useCallback((e: React.SyntheticEvent<HTMLInputElement>) => {
setS(parseInt(e.currentTarget.value) || 0);
}, [ ]);
React.useEffect(() => {
setS(v + 1);
}, [ v ]);
React.useEffect(() => {
setV(s - 1);
}, [ s ]);
return < >
<input type="text" value={s} onChange={ch} />
</>
}
var App: React.FC<{ }> = ({ }) => {
const [ v, setV ] = React.useState(20);
React.useEffect(() => {
}, []);
return < >
<div>real: {v}</div>
<A v={v} setV={setV} />
<B v={v} setV={setV} />
</>
}
ReactDOM.render(
< >
<App />
</>
, /* container */ document.querySelector('#app'));
ReactDOM.render(React.createElement(App), $('div#my_app')[0]);