Rendering specific component in React Native - reactjs

Question

I used the ScrollView's onMomentumScrollEnd handler to determine the current page based on the contentOffset in the recyclerlistview Component.
const [currentPage, setCurrentPage] = useState(0);
const onScrollEnd = (e) => {
let contentOffset = e.nativeEvent.contentOffset;
let viewSize = e.nativeEvent.layoutMeasurement;
let pageNum = Math.floor(contentOffset.x / viewSize.width);
setCurrentPage(pageNum);
};
return (
<View style={{ flex: 1 }}>
<RecyclerListView
rowRenderer={({ item }, index) => <Page item={item} id={index} />}
dataProvider={list}
layoutProvider={layoutProvider}
onMomentumScrollEnd={onScrollEnd}
isHorizontal
pagingEnabled
/>
<View style={{ flex: 0.1, backgroundColor:"gold" }}>
<Text>{`current page: ${currentPage}`}</Text>
</View>
</View>
);
I want to display the current Page inside a Text component, but when currentPage state changes in onMomentumScrollEnd handler the whole app is re-render. I need to re-render only the Text Component, any suggestion for that.

Answer 1

I find a solution. the easiest way is to create a class component and put the displayed component in it, then I reference it and change the current page with ref hook.
class DisplayCurrentPage extends React.Component {
contractor(prop){
super(prop)
state:{currentPage:0}
}
updateCurrentPage = (index) => {this.setState({CurrentPage: index})}
render(){
return(
<View style={{ flex: 0.1, backgroundColor:"gold" }}>
<Text>{`current page: ${this.state.currentPage}`}</Text>
</View>
);
}
};
const reference = createRef();
const onScrollEnd = (e) => {
let contentOffset = e.nativeEvent.contentOffset;
let viewSize = e.nativeEvent.layoutMeasurement;
let pageNum = Math.floor(contentOffset.x / viewSize.width);
reference.current.updateCurrentPage(pageNum);
};
return (
<View style={{ flex: 1 }}>
<RecyclerListView
rowRenderer={({ item }, index) => <Page item={item} id={index} />}
dataProvider={list}
layoutProvider={layoutProvider}
onMomentumScrollEnd={onScrollEnd}
isHorizontal
pagingEnabled
/>
<DisplayCurrentPage ref={reference} />
</View>
);
When the page is changed, only DisplayCurrentPage is re-render.

Answer 2

You can use React.memo which is an alternative to shouldComponentUpdate for functional components. It tells React when to re-render the component based on prev and next props.
const Item = React.memo(({ item }) => {
return (
<View>
........
</View>
);
});