how to change useState's state without render in functional component

Question

how to change useState's state without render in functional component

    const [imageId, setimageId] = useState(0);
    const Slide = () => {
            return (
                slides.map((item, index) => (
                    <View style={styles.slide}>
                        <TouchableOpacity onPress={()=>setimageId(index)} >
                            <Image source={item.image}} />
                        </TouchableOpacity>
                    </View>
                ))
            )
        }

when I change state in onPress slide component re-renders and images load again

so how can I change the state without rendering the slide component

Answer 1

You would need to create a component that will be inside the slides.map(...) and will have its own state.

If you change the state of Slide it will render the component Slide, that's basically the idea of the hook useState.

You can check the useRef docs also. When you want to change a value in the component without rendering you usually want to the useRef hook, not the useState