Stop component re-rendering based on props/observables

[ericlifs]

Hey everyone how are you?

I'm seeing a performance issue on my React Native app which uses mobx and I want to know if there is a tool I can use for fixing it or maybe the answer is that I'm approaching the issue with the wrong focus.

About the issue

The thing is that I have a page which returns a FlatList and at the same time I have a VideoPlayer modal (a video player with custom controls) seating on top of that Flatlist. The FlatList can have 1 to N items/component rendered at the same time. Obviously those components are observers of the stores (for example UIStore -store for defining the viewport width and height-).

I want to know if there is a way of stop re-rendering the FlatList components when the Modal is being shown (as they are seating behind the modal and not shown, I don't want to waste React's computing time on those blocks re-rendering logic).

Things I tried

Currently I have all of those components exported like:

export default observer(MyComponent)

So my first step was to add a React.memo there and strictly define when I want my components to stop re-rendering:

export default observer(MyComponent, (prevProps, props): boolean => return props.isModalOpen)`

Even though I'm seeing a performance improvement with that change, if I add a:

// This will get logged any time props/state changes
useEffect(() => {
  console.log('The component has re-rendered');
});

I'm seeing that console.log even when the modal is open.

My investigation result

I have seen this issue #2456 but I'm not sure how to implement it with React components as the untracked doc is very short.

So my questions are:

• Is there a way to stop components re-rendering due to unnecessary observables changes?
• Is there a way to stop getting stores updates based on some condition?

Thank you very much!

Eric.

[urugator]

// Observable subscribes to store.array changes
const MyComponent = observer(function MyComponent({ store }) {
  return <FlatList data={store.array.slice()} /> 	
})

// Untracked runs given function preventing observer to subscribe for anything accessed inside that function:
// therefore there are NO subscriptions in the following example:
const MyComponent = observer(function MyComponent({ store }) {
  return untracked(() => <FlatList data={store.array.slice()} />) 	
})

// Putting it together, we want to conditionally wrap the rendering logic in untracked, based on isModalOpen flag:
// the component re-renders when you open/close the modal, but it won't recieve any notifications while the modal is open
const MyComponent = observer(function MyComponent({ isModalOpen, store }) {
  const render = () => <FlatList data={store.array.slice()} />;
  return isModalOpen ? untracked(render) : render();
})

Instead of turning subscriptions off with untracked you can also do it other way around and turn subscriptions on with Observer:
(note it will introduce extra element in the vdom)

// no observer!
function MyComponent({ isModalOpen, store }) {
  const render = () => <FlatList data={store.array.slice()} />;
  return isModalOpen ? render() : <Observer>{render}</Observer>;
})

Another apporach is to maintain two 2 fields:

setData(data) {
  // internal maintaining most up to date version
  this._data = data;
  if (!this.isModalOpen) {
    // data exposed to UI
    this.data = data;
  }
}

closeModal() {
  this.isModalOpen = false;
  // make sure data is up to date on close
  this.data = this._data;
}

[urugator]

Or:

const MyComponent = observer(function MyComponent({ isModalOpen, store }) {
  const cache = useRef();
  if (!isModalOpen || !cache.current) {      
    cache.current = <FlatList data={store.array.slice()} />;	
  }
  return cache.current;  
})

[ericlifs]

Hey @urugator thanks for your answers, these are really heplful.

However I have two more questions now:

• The components should use the observer function (not the observable one), shouldnt' they?
• Do I have to use the untracked/cache in all the child observer components? Or just by using it on the parent component does the trick?

Something like this:

<ComponentA>
  <ComponentB />
  <ComponentC />
</ComponentA>

If all ComponentA, ComponentB and ComponentC are observers, do I have to implement this untracked on all three? Or just by using it on ComponentA will stop observing ComponentB and ComponentC?

Thank you very much,

Eric.

[urugator]

The components should use the observer function (not the observable one), shouldnt' they?

Yes, typo, sorry, fixed

Do I have to use the untracked/cache in all the child observer components? Or just using it on the parent component does the trick?

Each observer maintains it's own subscriptions. So if both ComponentA and ComponentC access store.array, both are individually notified on store.array change and therefore, both must individually implement some mechanism to prevent the subscription or re-rendering. You will probably want to extract such logic in some kind of HOC, that will be used instead of observer for anything that's in the background or something like that.