Unable to get it work on Expo

[outaTiME]

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 !!!

[outaTiME]

BTW, any advice will be welcome ✌️

[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 :)

[outaTiME]

Awesome @vzaidman,
thanks for your time and clarification 🙏

[nandorojo]

@vzaidman I'm trying to use this in a component that re-renders 15x when it opens to investigate. I don't see a way to debug it with Expo – should re-render explanations be in the console.logs? It works fine when I do it with Next.js.

[YajanaRao]

I don't see the logs in expo snack. Is it expected ?

[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...