Unable to get it work on Expo

Hi, today im trying to work in expo and unable to get it work, something missing?

here the code:

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

if (__DEV__) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

console.log('Example log')

export default class App extends React.Component {
  static whyDidYouRender = true
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }
  render() {
    const { visible } = this.state;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={() => this.setState({ visible: !visible })}>
          <Text>{visible ? 'Hide' : 'Show'}</Text>
        </TouchableOpacity>
        { visible === true && <Text style={{ marginTop: 16 }}>Hidden content</Text> }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

and here the link to snack:

https://snack.expo.io/@outatime/why-did-you-render

Thanks !!!

[vzaidman]

so the library only catches re-renders that “can be prevented” like the one I planted here: https://snack.expo.io/HJKGvLBUH

how do you do this in this case? you move the array to the top and make the component pure: https://snack.expo.io/Hy-YwLHUB

but the best advice is just to build apps and never prematurely optimize.

only use whyDidYouRender for HUGE components like lists and graphics which you want to make sure are not re-rendered too many times 😃

[vzaidman]

I don’t know what “expo” is and couldn’t be able to check it out in the upcoming time as i’m in the process of moving to a new country…