Final update.... I solved my other problem. I think useEffect was being called every time the state variable changed. The setInterval() didn't actually seem to be making anything happen repeatedly, though it did call countdown once and stop. Neither could setTimeout() be called recursively from within countdown().
But, turns out, I can make useEffect only respond to changes in the variable I care about, and trigger setTimeout every second from there. Seemed to fix the weird jumping around of my counter.
//////////////////////////////////////////////////////////////////////////////////////////
const Countdown = ({totalSeconds}) => {
const initialState = {
seconds: totalSeconds
}
const [data, setData] = React.useState( initialState )
function countdown() {
if ( data.seconds !== 0 ) {
setData({ seconds: data.seconds - 1 })
}
}
React.useEffect(() => {
if ( data.seconds > 0 ) {
setTimeout( countdown, 1000 )
}
}, [data.seconds])
return (
<div><h2>{data.seconds}</h2></div>
)
}
const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => {
return (
<div className="card">
<Countdown totalSeconds={model.seconds} />
</div>
);
}