"prevState" and "prevProps" not behaving as expected in React Native

Question

I have an array in my state in my React Native project, like this:

constructor(props) {
  super(props)
  this.state = {
    a: [1, 2, 3]
  }
}

I click a button to update the array, like this:

<TouchableOpacity
  onPress={() => {this.setState({a: [5, 6]})}
/>

I want to verify the state change in my componentDidUpdate() method, like this:

componentDidUpdate(prevProps, prevState) {
  console.log("prevState: ", prevState)
  console.log("state: ", this.state)
}

but this always gives

prevState:  (5) [-1, -1, -1, -1, -1]
state:  (5) [-1, -1, -1, -1, -1]

I confirmed using devTools that the array is indeed updating to [5, 6], but the componentDidUpdate() method is still just returning the old value. Any idea why?

Thanks!

try to add an `ìf (this.state !== this.prevState) { /* ... */ }` , as the [docs](https://reactjs.org/docs/react-component.html#componentdidupdate) recommend. — reisdev, Mar 27 '19 at 02:01

score 3 · Accepted Answer · answered Mar 27 '19 at 04:16

componentDidUpdate() should always be wrapped in a condition in order you need to add setState() method.

According to the docs:https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance

Also check this answer for your referece: Correct modification of state arrays in ReactJS

score 2 · Answer 2 · answered Mar 27 '19 at 02:33

I did implement your code, mine is working.

here is my code:

import React, { Component } from "react";
import { View, Text, Button, SafeAreaView } from "react-native";

import { baseStyles as styles  } from "../styles";

export default class Fetch extends Component{
  constructor(props) {
    super(props)
    this.state = {
      a:[1, 2, 3]
    }
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("prevState: ", prevState)
    console.log("state: ", this.state)
    alert(this.state.a)
  }

  render(){
    return(
    <SafeAreaView>

        <View style={styles.container}>
        <Text>
            Main Dish
        </Text>
        <Button
        title='press'
  onPress={() => {this.setState({a: [5, 6]})}}
/>
        </View>


    </SafeAreaView>

    )
  }
}

Thanks Mervys! It ended up actually being an error elsewhere. Thanks for confirming. I had to give the approved answer to the other guy, but I gave you the upvote and got a friend to as well. — gkeenley, Mar 27 '19 at 16:56

score 1 · Answer 3 · answered Aug 03 '20 at 23:33

Make sure you're comparing two arrays with :

componentDidUpdate(prevProps){
  if(JSON.stringify(prevProps.todos) !== JSON.stringify(this.props.todos){...}
}

Make sure you are changing the passed prop (state in parent) after deep cloning it:

let newtodos = JSON.parse(JSON.stringify(this.state.todos));
newtodos[0].text = 'changed text';
this.setState({ todos : newtodos });

"prevState" and "prevProps" not behaving as expected in React Native

3 Answers3