Help

Best way to read and write record as fast as typing?

Topic Labels: Custom Extensions
Solved
Jump to Solution
4699 10
cancel
Showing results for 
Search instead for 
Did you mean: 
Jack_Manuel
7 - App Architect
7 - App Architect

Any help on this issue would be really appreciated!

I’m making a simple app to create quotes. I’ve got everything up and running to edit fields with the <Input /> component and for anything other than text it works great e.g.

function updateRecord (quote, recordFields) {
    quotesTable.updateRecordAsync(quote, recordFields)
}

<Input
    name="Hire Start"
    type="date"
    value={quote.getCellValue('Hire Start')}
    onChange={(e) => updateRecord(quote, {'Hire Start': e.target.value})}
/>

However, when the input type is text (or currency, anything that can be typed quickly), there’s a very noticeable delay in the update to the cell value which makes input glitchy and, if you type fast enough, inputs get dropped.

I then switched to controlling the <Input /> with a state object, only writing back to Airtable in a useEffect() that watched the state object. This solved the issue but now updates made in Airtable (outside of the app) are of course not reflected in the app until next render.

How do I find a middle-ground between these two patterns? Need to be able to input smoothly but have data go back and forth between Airtable and the app in realtime?

Hope this makes sense to someone but can share more of my code if needed.

Thanks!

10 Replies 10
Steve_Haysom
8 - Airtable Astronomer
8 - Airtable Astronomer

Just had a look at how you did it and I think your way was better, as it’s only using 1 input and my way produced more screen flicker, plus some warnings in the console about changing from controlled to uncontrolled components.