CODEWITHSUNDEEP
javascriptreactjsreact-native
Henrik
Henrik

Reputation: 928

React Native useState prevent rerendering flatlist

So I have a React Native Flatlist. Then I have a useState which fires when I click on a item in my flatlist. The problem I am facing to right now is that if I click on a item and the useState() fires every item is going to rerender. This is bad because it makes the app extremly slow.

Is there any way to set my State without the FlatList gets rerendered but another view appears (because of the useState())??

My code looks like this:

import React, {useState} from "react"
import {View, Flatlist, Text} from "react-native"

export default const App = () => {

  const [x, setX] = useState(false)

  return(
    <View>
      <FlatList
        data = {
          ["-",
          "--",
          "---",
          "----",
          "-----",
          "------",
          "-------",
          "--------",
          "---------"]
        }
        renderItem={({item}) => {(
          <View>
            <TouchableOpacity onPress={() => setX(true)}>
              <Text style={{padding: 10,}}>{item}</Text>
            </TouchableOpacity>
          </View>
        )}}
      />
      {x == true ? <Button title="It works" onPress={() => console.log("Everything is working")} /> : <View />}
    </View>
)
}

In this example the data list is very small. If it get's bigger you really can see a difference

Upvotes: 0

Views: 590

Answers (2)

Adam Jenkins
Adam Jenkins

Reputation: 55623

Here's an idea with memo and separate components:

const App = () => {
  const [x,setX] = useState(false);

  return (
    <View>
      <MyFlatList setX={setX}/>
      {x == true ? <Button title="It works" onPress={() => console.log("Everything is working")} /> : <View />}
    </View>
  )
}

and then:

const MyFlatList = React.memo(({setX}) => {
  return (
      <FlatList
        data = {
          ["-",
          "--",
          "---",
          "----",
          "-----",
          "------",
          "-------",
          "--------",
          "---------"]
        }
        renderItem={({item}) => {(
          <View>
            <TouchableOpacity onPress={() => setX(true)}>
              <Text style={{padding: 10,}}>{item}</Text>
            </TouchableOpacity>
          </View>
        )}}
      />
  );
});

crawler's answer is very good with recommendations of memoizing the data and the callback, as well.

Upvotes: 1

crawler
crawler

Reputation: 348

Here are things to consider to make sure that the FlatList won't re-render on state change (see code below):

  1. Make sure that the data being passed is stored or memoized somehow.
  2. Make sure that the callbacks are also memoized.
import React, {useState} from "react"
import {View, Flatlist, Text} from "react-native"

export default const App = () => {
  // See 1. above
  const [data, setData] = useState([
    "-",
    "--",
    "---",
    "----",
    "-----",
    "------",
    "-------",
    "--------",
    "---------",
  ]);
  const [x, setX] = useState(false)

  // See 2. above
  const renderItem = useCallback(({ item }) => (
    <View>
      <TouchableOpacity onPress={() => setX(true)}>
        <Text style={{padding: 10,}}>{item}</Text>
      </TouchableOpacity>
    </View>
  ), []);

  return(
    <View>
      <FlatList
        data={data}
        renderItem={renderItem}
      />
      {x == true ? <Button title="It works" onPress={() => console.log("Everything is working")} /> : <View />}
    </View>
)
}

Upvotes: 2

Related Questions