Debouncing React’s Controlled Textareas w/ Redux & Lodash
Justin Tulk
549

Cool article! I think you are missing a 4th, and in my opinion, cleaner solution that doesn’t require internal component state.

If you just debounce the API call and not the the action that updates the state then the user will see immediate updates and the API call will only be called when necessary.

Here’s a rough example:

const debouncedAPI = debounce(_dispatch => _dispatch(makeApiCall()));
const doReduxAction = (value) => {
return dispatch => {
return dispatch({
type: 'TYPE',
payload: Promise.all([
debouncedAPI(dispatch),
dispatch(changeTheReduxState(value))
])
});
};
}
Show your support

Clapping shows how much you appreciated Tyler Getson’s story.