When should I use the hook useImperativeHandle?
I mean, I think there are multiple ways to use it, and that it is useful to access child state or child methods from a parent component...
So... imagine this situation:
I have a screen "Profile", which implements a pull-to-refresh to update the user data and posts. Posts are rendered in a child component "UserPosts", where I fetch the respective posts of a user (pagination, listeners, ...).
If the Profile screen is the one responsible of fetching the user data and render the <RefreshControl />, should I pass a ref to my child in order to do userPostsRef.current.fetchNewPosts() from the parent?
Something like:
- Parent Component
function Profile({ userId }) {
const { userData, fetchUserData } = useFetchUserData(userId);
const [isRefreshing, setIsRefreshing] = useState(false);
const userPostsRef = useRef(null);
const handleOnRefresh = async () => { // simplified, no mutex, no error catching
setIsRefreshing(true);
const promises = [
fetchUserData(),
userPostsRef.current.fetchNewPosts()
];
await Promise.all(promises);
setIsRefreshing(false);
}
...
const renderFooter = () => <UserPosts ref={userPostsRef} userId={userId} />
return (
<FlatList
refreshing={isRefreshing}
onRefresh={handleOnRefresh}
ListHeaderComponent={renderHeader()}
ListFooterComponent={renderFooter()}
/>
);
}
- Child Component (A reusable component that can be placed in different screens, as it is responsible for its own logic...)
const UserPosts = forwardRef({ userId }, ref) => {
const { posts, isLoading, fetchNewPosts, fetchMoreOldPosts } = useFetchUserPosts(userId);
useImperativeHandle(ref, {
fetchNewPosts,
});
return <CardList data={posts} isLoading={isLoading} ... />;
}
