React Native: Component rerender but props has not changed

Question

I'm encountering this strange issue that I can figure out why is happing.

This should not be happening since the prop passed down to the History component has not been updated.

./components/History.js

...
const History = ({ previousLevels }) => {
  return (
    <ScrollView style={styles.container}>
      {previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
        return (
          <CardKBT
            key={date}
            date={date}
            stressValue={stressValue}
            tirednessValue={tirednessValue}
          />
        )
      })}
    </ScrollView>
  )
}
...
export default History

As can be seen in this code (below), the prop to the History is only updated once the user press Save.

App.js

import React from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { AppLoading, Font } from 'expo'
import Store from 'react-native-simple-store'
import { debounce } from 'lodash'

import CurrentLevels from './components/CurrentLevels'
import History from './components/History'

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      isLoadingComplete: false,
      currentLevels: {
        stressValue: 1,
        tirednessValue: 1,
      },
      previousLevels: [],
    }

    this.debounceUpdateStressValue = debounce(this.onChangeStressValue, 50)
    this.debounceUpdateTirednessValue = debounce(
      this.onChangeTirednessValue,
      50
    )
  }

  async componentDidMount() {
    const previousLevels = await Store.get('previousLevels')
    if (previousLevels) {
      this.setState({ previousLevels })
    }
  }

  render() {
    const { stressValue, tirednessValue } = this.state.currentLevels

    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          ...
        />
      )
    } else {
      return (
        <View style={{ flex: 1 }}>
          <CurrentLevels
            stressValue={stressValue}
            onChangeStressValue={this.debounceUpdateStressValue}
            tirednessValue={tirednessValue}
            onChangeTirednessValue={this.debounceUpdateTirednessValue}
            onSave={this.onSave}
          />
          <History previousLevels={this.state.previousLevels} />
        </View>
      )
    }
  }

...

  onChangeStressValue = stressValue => {
    const { tirednessValue } = this.state.currentLevels
    this.setState({ currentLevels: { stressValue, tirednessValue } })
  }

  onChangeTirednessValue = tirednessValue => {
    const { stressValue } = this.state.currentLevels
    this.setState({ currentLevels: { stressValue, tirednessValue } })
  }

  onSave = () => {
    Store.push('previousLevels', {
      date: `${new Date()}`,
      ...this.state.currentLevels,
    }).then(() => {
      Store.get('previousLevels').then(previousLevels => {
        this.setState({
          currentLevels: { stressValue: 1, tirednessValue: 1 },
          previousLevels,
        })
      })
    })
  }
}

Answer 1

The component will re-render when one of the props or state changes, try using PureComponent or implement shouldComponentUpdate() and handle decide when to re-render.

Keep in mind, PureComponent does shallow object comparison, which means, if your props have nested object structure. It won't work as expected. So your component will re-render if the nested property changes.

In that case, you can have a normal Component and implement the shouldComponentUpdate() where you can tell React to re-render based on comparing the nested properties changes.