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 useEffect(() => { s