[FIXED] How to prevent tabs from updating / re-rendering when they are not focused?

Issue

I'm using material top tabs. Problem is, when a state changes in one tab, all other tabs that use the same state render again which slows the app a little. How do I prevent tabs from getting updated unless they are focused / seen ?

Solution

In your components, you can get state property and detect is it in focus or not. And if it is not in focus you can prevent rerendering or place your own logic. An example is here: https://reactnavigation.org/docs/material-top-tab-navigator#tabbar

Answered By - Kirill Novikov
Answer Checked By - - Mary Flores (ReactFix Volunteer)