How can create the valuable in react native functional component and it doesn't trigger a re-render when update it?

Ryan Yu Ryan 0
Viewed 35

in this case, it will trigger render again when I call updateNumber(), so how can create the valuable that it is for saving data only?

function test() {
   const [cartNum, setCartNum] = useState(0);

  function updateNumber() {
    setCartNum(number +1);
  }
  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}
react-hooks functional-programming react-native reactjs
2 Answers

Use the useRef hook

Example below

// Call on top of component 
const number = useRef(0);

const updateNumber = ()=>{
    number.current++;
}
carlosdafield0

There are 2 ways for it to update and not re render:

// by using normal variables
function test() {
   let number = 0;

  function updateNumber() {
    number++
  }
  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

// or as carlos mentioned by using ref

function test() {
   const number = useRef(0);

  function updateNumber() {
   number.current++;
  }
  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

Hope it helps. feel free for doubts

Gaurav Roy0
Related