I've got some piece of functionality that I want to update very quickly. When I use local state, it updates pretty much immediately, the feedback is immediately visible to the user.

However I want to store this data so that the user can have this setting saved permanently (it also sends it to a database asynchronously via sagas, but that doesn't seem to be related to the slowdown)

The slowness seems to be related to saving it to my Redux store.

I am trying to figure out how to optimize it - I am currently using a relatively large Redux object (about 60 parameters) which may very well be the issue, even though I've read that increasing the size of an object stored in Redux shouldn't cause any issues.

My code to update the object looks like this:

export const settingsSave = (settings: object) => {
  return {
    type: Actions.SETTINGS_SAVE,
    payload: settings,
  };
};

And the data I am trying to update in it is just a standard boolean.

props.settingsSave({
    sentence_collapse: !props.settings.sentence_collapse,
 });

Is there any way to speed this operation up, besides breaking up the large object into smaller objects (which would be a headache, as it is stored all on the same data related to user settings in my backend).

I tried this:

const [collapse, setCollapse] = useState(props.settings.sentence_collapse);

And then tried to have the actual user interface element controlled by the local state, whilst updating global state in the background, but this seemed to lead to the same slowness.

Is there some sort of principle I am missing for React/Redux here for faster speed?