React Native同值primitive状态更新引发单次额外渲染问题

环境信息 #

• Expo版本：47.0.8
• React版本：18.1.0
• 复现场景：无Expo的纯React Native项目（React 18、未启用严格模式）同样可复现该问题，仅移动端存在此现象，Expo Web无问题

问题现象 #

更新相同值的状态时，即便该值是数字这类原始类型，组件仍会触发一次额外渲染。

代码示例 #

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>
    </>
  );
}

日志输出情况 #

• 应用启动时：

RENDER! 10

• 首次点击TouchableOpacity：

RENDER! 11

• 第二次点击TouchableOpacity：

RENDER! 11

• 后续点击：无日志输出

内容的提问来源于stack exchange，提问作者Topsy