Syncing Controlled Inputs with External State in React (Without useEffect or setState-in-render)

Syncing Controlled Inputs with External State in React (Without useEffect or setState-in-render) If you've ever built a numeric input in React that syncs with an external source (a database, a parent prop, a WebSocket), you've probably fought this battle: User types → local state updates External update arrives → you need to reflect it without blowing away what the user is mid-typing useEffect to sync state feels hacky and fires at the wrong time setState during render is a React warning waiting to happen Here's a pattern that solves all of this cleanly. The Problem Consider a time-editing input where the value comes from a prop (synced from a database), but the user can also type freely: // ❌ The naive approach — breaks when prop updates mid-edit function TimeInput ({ value , onChange }: { value : number ; onChange : ( v : number ) => void }) { const [ display , setDisplay ] = useState ( value . toFixed ( 1 )); // This runs AFTER every render — causes flicker and double-render useEffe