We will be going through the React Hooks concept and their use cases upon FlatList implementation in React Native. Let’s catch the idea of creating a FlatList from scratch and build the on-demand data fetch logic along with this article. Also, we can try out the Animated API upon scrolling event too!

How to use FlatList with Hooks in React Native?

The FlatList in Hooks. And probably, some performance optimization configurations.

Image credit: Tatiana Rodriguez

React Hooks?

Hooks are javascript functions, that allow us to use state without writing up a class.

Therefore, Hooks will be used in React function components only instead of React Component Classes.

Bear in mind that the rules we need to follow, the do and don’t, as outlined in the Hooks Documentation.

• Do not call Hooks inside loops or nested functions, let alone in a conditional logic.
• Do Call Hooks at the very top point where your React function starts.

“WHY?”