I have a react native project that has React Native Navigation with Drawers and Stacks. I have everything set up the way I think it should be set up, and it all technically works. However, when I have navigated and populated Stacks and Drawers, when I switch the 'dark mode' variable to true or false, it takes up to 3 seconds for the screen(s) to reflect the changes. Is there some optimization I can do to make sure that it happens instantly?

I can't share my code per se, but if you have a starting point, I can pseudo-code to illustrate how I have it set up. I'm hoping there's just some tribal knowledge with RN that I dont' know to make it render instantly. Thanks in advance!

CodePudding user response：

Im not sure how relevant this is, but I had massive lag spikes when implementing plenty of useEffects and useStates, because of a memory leaks. (not checking if data exists already in useEffects before running code) After implementing sqLite and giving up states it got better but still went on, dark mode context by itself shouldn't slow you down so my guess is it re-renders parts of your app. If you are passing new object down the component structure through context it will cause re-render, so I guess useMemo is a good place to start if you don't implement it already.

CodePudding user response：

What I can imagine are

1. the changes is blocked by another heavy task
2. ui changes is running in a background thread
3. some useEffect's dependencies are set wrongly
4. pages are not inside the theme context provider

For case 1, as you are not mentioning it, I don't think there is any heavy task running.

Case 2, react native is single thread natively. So if you are not doing anything with native code / any lib for threads, I don't think it is the case.

So, I suggest you to check the dependencies and the theme context.