CODEWITHSUNDEEP
react-native
Ljavuras.py
Ljavuras.py

Reputation: 55

React Native doesn't re-render on DOM change

I had an array of components inside a ScrollView component. Somehow react native doesn't re-render when the array is modified.

Here's a demonstration of my problem:

const TestApp = () => {
  const [arr, setArr] = useState([]);
  
  function pushArr() {
    setArr((arr) => {
      arr.push(1);
      return arr;
    });
    console.log('pushArr():', arr);
  }

  function flushArr() {
    setArr([]);
    console.log('flushArr():', arr);
  }

  useEffect(() => {
    console.log('useEffect():' , arr);
  })

  return (
    <>
      <ScrollView style={{flex:1}}>
        {arr.map((elem, i) => <Text key={i}>{elem}</Text>)}
      </ScrollView>
      <Button title="Push" onPress={pushArr}></Button>
      <Button title="Flush" onPress={flushArr}></Button>
    </>
  )
}

The page remains blank, and no updates happen on button press.

I've logged out arr and these are my findings:

  1. pushArr() and flushArr() works as expected
  2. useEffect() gets triggered only on startup and after flushArr()

Can anyone explain this behavior, and what mistakes have I made?

Upvotes: 1

Views: 56

Answers (1)

mattroberts
mattroberts

Reputation: 630

If I remember correctly, you need to make a copy of the array whenever you want it to “react”. The new memory address will let react know it should update. In other words, you shouldn’t mutate the array.

You can use the spread operator to make a copy and then push an element to the end which you can then pass to useArr. Usually I see people just passing the new object inside your useArr function.

I also don’t see you passing anything to your useArr function.

Upvotes: 2

Related Questions