Hook Pattern

[weikee94]

Benefits

• simplifies component
• reusing stateful logic
• sharing non-visual logic
• good alternative to older react design patterns

Listings.js ```js import React from 'react'; import { Listing } from './Listing'; import { ListingsGrid } from './ListingsGrid'; import useListings from '../hooks/useListings'; export default function Listings() { const listings = useListings(); if (!listings) return null; return ( {listings.map((listing) => ( ))} ); } ``` useListings.js ```js import React from 'react'; export default function useListings() { const [listings, setListings] = React.useState(null); React.useEffect(() => { fetch('https://house-lydiahallie.vercel.app/api/listings') .then((res) => res.json()) .then((res) => setListings(res.listings)); }, []); return listings; } ``` [stackblitz](https://stackblitz.com/edit/react-ts-xrwfcv?file=App.tsx)