Fast refresh causes list component to render multiple times

SDK Version: 42.0.3
Platforms : android/ios

Hi,
The problem I’m having is with a table/list component (using react native paper’s DataTable but this also happens with regular react native components like View, Text etc.).

I’m mapping an array to a list, however every time I save my code and the simulator refreshes, the list is rendered again and adds the same list to the end of the existing list.

I have mapped lists before without this happening and can’t figure out what’s different about this one.

I’ve tried it with my dataset and just a single Hi and it gives the same results.

Thanks in advance for any suggestions

My component:

export default StatementScreen = ({ route: { params } }) => {
  const { userToken } = useContext(UserContext);

  const [selectedProperty, setSelectedProperty] = useState("all properties");
  const [paymentData, setPaymentData] = useState([]);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    getAllStatements(userToken)
      .then((statements) => {
        const { payments } = statements;
        for (const [key, value] of Object.entries(payments)) {
          paymentData.push(value);
        }
        return setPaymentData(paymentData);
      })
      .then(() => {
        if (params) {
          setSelectedProperty(params.unit.name);
        }
        setReady(true);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const onPress = (payment) => {
    console.log(payment);
  };

  return (
    <SafeWitHeaderContentView>
      <DefaultHeader />
      <NestedStackHeader title="My statements" />
      {ready ? (
        <DefaultContainer>
          <View style={styles.sectionHeader}>
            <FontText style={{ color: colors.textOnLightAccent }}>
              Showing statement for {selectedProperty}
            </FontText>
          </View>

          {/* table header */}
          <DataTable style={styles.table}>
            <DataTable.Header>
              <DataTable.Title>
                <FontText>Date</FontText>
              </DataTable.Title>
              <DataTable.Title numeric>
                <FontText>Balance</FontText>
              </DataTable.Title>
              <DataTable.Title numeric>
                <FontText>Transaction</FontText>
              </DataTable.Title>
            </DataTable.Header>

            {/* table body */}
            {paymentData.map((payment, index) => {
              let transaction = "";
              const received = parseFloat(payment.received);
              const charged = parseFloat(payment.charged);

              if (received > 0) {
                transaction = (
                  <FontText style={{ color: "green" }}>
                    +{received.toFixed(2)}
                  </FontText>
                );
              } else if (charged > 0) {
                transaction = <FontText>-{charged.toFixed(2)}</FontText>;
              } else if (charged < 0) {
                transaction = <FontText>{charged.toFixed(2)}</FontText>;
              }

              const balance = payment.balance;

              return (
                <Pressable
                  onPress={() => {
                    onPress(payment);
                  }}
                  key={index}
                >
                  <DataTable.Row>
                    <DataTable.Cell>{formatDate(payment.date)}</DataTable.Cell>
                    <DataTable.Cell numeric>
                      {balance.toFixed(2)}
                    </DataTable.Cell>
                    <DataTable.Cell numeric>{transaction}</DataTable.Cell>
                  </DataTable.Row>
                </Pressable>
              );
            })}
            <FontText style={{ color: colors.darkGrey, padding: 10 }}>
              Select a transaction to view details
            </FontText>
          </DataTable>
          <View style={styles.datePickerContainer}>
            <View style={styles.datePickerHeader}>
              <FontText style={{ color: colors.textOnLightAccent }}>
                Select a date range
              </FontText>
            </View>
          </View>
          <View style={{ height: 200 }}></View>
        </DefaultContainer>
      ) : (
        <Loading content={"statements"} />
      )}
    </SafeWitHeaderContentView>
  );
};

First render

After refresh

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.