StateManagment tools vs native useState

Question

im just curious here but is there any performance hit when using redux or mobx compared with native useState or context api? no matter how small example

// mobx code
@observable isLoading: boolean = false;
@action setLoading = () => {
loading = true;
}

// native react code
const [loading, setLoading] = useState<boolean>(false);
const setLoader = () => setLoading(true);

is there a perfomance difference if a component tries to access the loading state from each of the following code above? or am i just tripping lol

If performance is you primary concern when trying to decide to use context, useState, redux or mobx then please let someone else make this decision. You can hurt performance so much more by using any of the techniques in a wrong way. Use the technique that is relevant to your requirements should be the major concern. Trying to squeeze microseconds by choosing the "best" is way down the list and if it is a major concern then why choose JavaScript as your programming language to do so? — HMR, Jan 11 '21 at 07:43

score 1 · Answer 1 · answered Jan 11 '21 at 07:39

Every state management tool needs to trigger a re-render. It will do so by issuing some kind of local state change in the component (at least for function components). So you have the cost of that local state change PLUS it has the additional cost of externally tracking which component is subscribed to what part of the state etc.

That said: this does not matter. This is in the cost of nanoseconds. You will never be able to even measure it in reality.

StateManagment tools vs native useState

1 Answers1