title: 1. Blog Post - recent dev learnings excerpt: "New year new things to try...I thought about blogging for quite some time and yet never found the time or muse to get started...but here it is - my first blog post 🎉. It is entirely about my recent learnings in frontend development (Typescript/React) and probably not too sophisticated since I’m effectively working with React since a year. I plan on doing future posts like this but might also cover other topics and would highly appreciate any feedback 🙏 and also reading about related learnings you’ve made." coverImage: /assets/blog/first-post/cover.png coverImageInfo: generated with carbon coverImageUrl: https://carbon.now.sh/ date: "2022-01-09T05:35:07.322Z" ogImageUrl: /assets/blog/first-post/cover.png

New year new things to try...I thought about blogging for quite some time and yet never found the time or muse to get started...but here it is - my first blog post 🎉. It is entirely about my recent learnings in frontend development (Typescript/React) and probably not too sophisticated since I’m effectively working with React since a year. I plan on doing future posts like this but might also cover other topics and would highly appreciate any feedback 🙏 and also reading about related learnings you’ve made. January 9, 2022

Topics:

Data error loading hook pattern

I’ve seen this pattern in different versions repeatedly (I think for example at Kent C. Dodds) and it improves the readability of a React component. It is probably nearly as old as hooks are, but since I really like it, I still want to share it.

It applies to components that involve server communication, the example deals with fetching and displaying a Todo card.

const ToDoCard = ({id}: {id: string}) => {
  const {data, error, loading} = useServerToDoCard(id);

  return (
    <BannerOrContent hasError={error} isLoading={loading}>
      <div>
        <h1>{data.title}</h1>
        <div>{data.description}</div>
      </div>
    </BannerOrContent>
  )
}

In the example you can see that all server calls, state management and reaction to fetch status changes are hidden in the component. This can be achieved by letting the useServerToDoCard hook take care of:

• Making server requests (fetch the Todo card title and description) and handling responses
• Storing the result in a store/state if it can be edited locally
• Returning appropriate loading and error conditions

and an additional BannerOrContent component that will display hints to the user when the content isn’t ready yet or show the content of the Todo card.

<aside> 🔜 There is more to that, by applying this pattern, using a store like redux and other custom hooks you can effectively forget about smart and dumb components. Just use components to define the view and get your content ready to show by custom hooks.

</aside>