如何在没有渲染的情况下在你的本机组件中设置 useRef current.value？

Question

my issue is my detail screen will keep loading in order to getAPI back everytime i try to add quantity using State its really annoying. so far my best option is only using useRef to pre-caution my screen from rendering. is there any advise or best practice to solve this issue? my goal is only to display my current.value from useref please help. thank you.

here is my code:

 export default function ProductDetail({route, navigation}) {
  const id = route.params.itemId;
  const {addToCarts, carts} = useStore();
  const refQty = useRef(1);

  const handlerIncreaseQty = () => {
    refQty.current = refQty.current + 1;
    console.log(refQty.current);
  };

  const handlerDecreaseQty = () => {
    if (refQty.current <= 1) {
      return;
    }
    refQty.current = refQty.current - 1;
    console.log(refQty.current);
  };

here is my render:

<View style={tw`flex-1 border p-4 my-2 rounded-xl bg-yellow-300 `}>
          <View style={tw`flex-1`}>
            <Image
              style={{
                width: '100%',
                height: '100%',
                resizeMode: 'center',
              }}
              source={{uri: `${data.image}`}}
            />
          </View>
          <View style={tw`flex-1 my-1`}>
            <Text style={tw`bg-green-400 p-2`}>{data.description}</Text>
          </View>
          <View style={tw`flex-row justify-evenly`}>
            <View style={tw`flex-row items-center`}>
              <Button title="-" onPress={handlerDecreaseQty} />
              <Text style={tw`mx-3`}>{refQty.current}</Text>
              <Button title="+" onPress={handlerIncreaseQty} />
            </View>
            <View>
              <Button
                title="add to cart"
                onPress={() => handlerAddToCarts(data)}
              />
            </View>
            <Button
              title="Go back"
              onPress={() => {
                navigation.goBack();
              }}
            />
          </View>
        </View>

my screen looks like:

Answer 1

This is not possible. You are trying to display a the current value of a ref while dynamically changing it in your UI. This is what states are for by design of the framework.

A screen will only update its information visually, this means it rerenders in a new render cycle, if its current state somehow changes.

This is by design. If you do not want this to happen, then you might want to consider a different framework.

If you have an API call which is triggered everytime your screen rerenders, then you have a different problem. There is a standard pattern to solve this.

React.useEffect(() => {
   // fetch data and set state
   // the dependency array is empty, thus this will only be called once
}, [])

If you use a hook that handles your API calls, then you might want to consider adding an application cache such as Vercel's SWR .

Answer 2

const DetailsScreen = () => {
    const [quantity, setQuantity] = useState(1);
    const [product, setProduct] = useState();

    useEffect(() => {
      const data = // get your data;
      setProduct(data);
    }, []);
};

This is how you should structure your component. If this is not what you need make a comment.