3

Hello I am using the last version of Expo (47.0.8) in my react native project. React version is : 18.1.0

Edit : I produce that even in a bare React Native project without Expo. (react 18)

No strict mode enabled.

It seems that updating a state with the same value cause another render, only once. Even if the value is a primitive, like a number ( not an object )

import { useState } from "react";
import { Text, TouchableOpacity } from "react-native";

export default function App() {
  const [value, setValue] = useState(10);

  function updateValue() {
    setValue(11);
  }

  console.log("RENDER !", value);
  
  return (
    <>
      <TouchableOpacity style={{marginTop:200}} onPress={updateValue}>
        <Text style={{ fontSize: 40 }}>Update value</Text>
      </TouchableOpacity>
      <Text style={{ fontSize: 40 }}>{value}</Text>
    </>
  );
}

So when the app start the output :

RENDER! 10

First click on the TouchableOpacity :

RENDER! 11

Second click on the TouchableOpacity :

RENDER! 11

Then, other clicks don't display anything.

Snack example (check only on mobile it does not happen on expo web) :

https://snack.expo.dev/yalexm1mw?platform=ios

Topsy
  • 1,023
  • 1
  • 11
  • 26

0 Answers0