import React from "react"; import useBlogPosts from "./useBlogPosts"; function BlogPosts() { const { blogPosts = [], loading } = useBlogPosts(); if (loading) return

; return ( <>

Posts

{post.title}

); } function Tags() { const { blogPosts = [], loading } = useBlogPosts(); const tags = new Set(blogPosts.map(post => post.tag)); if (loading) return

; return ( <>

My Blog

{/* I am toggling the components on/off here to demonstrate that the data will be available immediately if it has been previously fetched by another component */}

Click the buttons below to show/hide (mount/unmount) the different components that subscribe to the useBlogPosts hook. Notice how the list of blog posts is immediately available to all components after the first one is mounted and is done loading

{showCount && (

{loading ? "Loading..." : `Total posts: ${blogPosts.length}`}

)}

{showPosts && }

{showTags && }

{/* This is to show that every subscriber to the custom hook gets updated immediately the data is updated */}

Add Blog Post

Title: setTitle(e.target.value)} />

Tag: setTag(e.target.value)} />

); } export default App;

custom-data-fetching-hook-example