KIPRI
LightNews LightNews
KIPRI
@kipri.dev
9 followers 81 following 8 posts
Posts Replies Media Videos
Reposted by KIPRI
tkdodo.eu
Which one do you like better? I think it’s not even close. The version with early returns gets clear branching, type-narrowing (TS knows that posts are defined after we check for isPending and isError), and evolves a lot better (can easily add branches) than the version with conditional rendering.
const Layout = ({ category, children }) => ( <div className="p-4"> <h2 className="text-xl font-bold mb-4">{category.charAt(0).toUpperCase() + category.slice(1)} Posts</h2> {children} </div> ); export const Posts = ({ category }) => { const { isPending, isError, data: posts } = usePosts(category); if (isPending) { return ( <Layout category={category}> <div className="mb-4 text-blue-500">Loading posts...</div> </Layout> ); } if (isError) { return ( <Layout category={category}> <div className="mb-4 text-red-500">{error.message}</div> </Layout> ); } if (posts.length === 0) { return ( <Layout category={category}> <div className="mb-4">No posts found for this category</div> </Layout> ); } return ( <ul className="space-y-4"> {posts.map((post) => ( <li key={post.id} className="border p-3 rounded"> <h3 className="font-semibold">{post.title}</h3> <p>{post.body}</p> </li> ))} </ul> ); };
March 13, 2025 at 8:12 AM
Hello, world!
November 10, 2024 at 8:28 PM