openspacelabs / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
205 stars 57 forks source link

React Profiler sees constants updates #47

Open janpe opened 1 year ago

janpe commented 1 year ago

Using the following snippet I see from the logging that Item has no excessive renders but React Profiler sees updates continuously in batches of 2 (one for each instance of ReactNativeZoomableView).

import { ReactNativeZoomableView} from '@openspacelabs/react-native-zoomable-view';
import { Profiler } from 'react';
import { View } from 'react-native';

const Item = (): JSX.Element => {
  console.log('Item');
  return <View style={{ width: 150, height: 150, background: 'purple' }} />;
};

export const Component = (): JSX.Element => {
  const array = [undefined, undefined];

  const onRenderCallback = () => {
    console.log('Profiler');
  };

  return (
    <Profiler id="screen" onRender={onRenderCallback}>
      {array.map((_, i) => (
        <ReactNativeZoomableView key={i}>
          <Item />
        </ReactNativeZoomableView>
      ))}
    </Profiler>
  );
};
knro commented 1 year ago

I experience the exact same issue, I see almost 5 updates per second with nothing happening at all. React Profile says the reason is due to parent getting rendered but parent is not getting updated either.