2

Right so I have a sports app and im just displaying the fixtures for each team like so:

export const Fixtures = ({ fixtures }) => {
        console.log('rendering again')
        return (
            <View>
                <Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', marginBottom: 10 }}>
                    Gameweek Fixtures
                </Text>
                <View style={styles.container}>
                    <View>
                        {fixtures.map((match: any) => (
                            <View key={match.home} style={styles.match}>
                            // displaying fixtures here
                            </View>
                        ))}
                    </View>
                </View>
            </View>
        )
    }

I'm displaying the images for the logo for each team above and I was noticing a flicker and when ever this component renders. and it renders in a top nav view. i.e. I click on the fixtures in the navbar and it shows this component.

I don't like the flicker so I'm trying to make it more performant and decided to use react.memo

I wrapped the above in React.memo like so:

export const Fixtures = React.memo(({ fixtures }) => {
        console.log('rendering again')
        return (
            <View>
                <Text style={{ fontSize: 17, alignSelf: 'center', fontWeight: '700', marginBottom: 10 }}>
                    Gameweek Fixtures
                </Text>
                <View style={styles.container}>
                    <View>
                        {fixtures.map((match: any) => (
                            <View key={match.home} style={styles.match}>
                            // displaying fixtures here
                            </View>
                        ))}
                    </View>
                </View>
            </View>
        )
    },
(prevProps, nextProps) => {
    console.log(prevProps, nextProps, 'the propss')
    return true // props are not equal -> update the component)
})

but for some reason it is not logging the console.log when the component renders but it does log the line at the top that says: console.log('rendering again').

why is it not logging? and what can i do to prevent this flicker on every render? I just want to display the fixtures, instead it flashes, flickers then shows them (might be ok on first render for this but not on every subsequent one)

Red Baron
  • 7,181
  • 10
  • 39
  • 86
  • What do you mean by _"it is not logging the console.log when the component renders"_, which `console.log` does not log ? – kca Jan 17 '21 at 17:47

0 Answers0