Hey there!

Mads here again with a new issue of the Top 3 in Tech newsletter. This time we'll be getting a bit more technical - so please respond to this email if you enjoy this type of detailed content or if you prefer the usual newsletter style 🙌

Anyways, let's get into it:

​

1. Data fetching in React

There's no denying the amazing popularity of ReactJS and what is has done for the front-end ecosystem. Although technically "just" a library, the ability to use React as a framework to create websites and apps has been a gamechanger for front-end developers. And in the last several years (and probably the next several years too), React has been the undisputed most popular JS framework.

And for good reason! React simplifies a lot of daunting tasks and helped pioneer the "UI as a function of state" paradigm. Meaning that it shouldn't be the job of developers to imperatively keep our UI's in sync with our data when React can do it for us. React also offers a lot of freedom in the tools we choose to use around it - like routing, state management and animations.

And this last point is actually what I wanted to talk about today. Because React dropped a huge RFC ("Request for Comments") proposal this week with some new features for getting data into your components.

While the freedom of React is generally a good thing, it also means there's many different ways to do the same thing - including many wrong or suboptimal ways.

Data fetching is one of those things.

Most frameworks on top of React like NextJS or Remix have their own ways to fetch data like "getServerSideProps" for NextJS or "Loaders" for Remix. Besides that, there's libraries like React-Query or general state-management tools. And then of course, there's good ol' useEffect which​ most React devs have struggled with at one point or another.

Each of these approaches have their own advantages and disadvantages. But in the end, it's confusing for us developers to have to learn so many different approaches for data fetching depending on the project we're working on.

Luckily, that's about to change.

In the earlier mentioned RFC, the React team presents using async / await with Server Components - including an awesome new "use" hook that can be called conditionally (unlike the current React Hooks!) for data fetching.

It's a super interesting proposal and I think exactly what the ecosystem needs to move forward. If you're interested in the details, check out the full RFC here or check out this 12 minute video explaining the changes:

It's gonna be some time before these changes make it into React, but it's an awesome step in the right direction. And I'm super excited to see how it plays out!

​

2. VueUse

And while we're on the topic of cool JavaScript tools, I've been working a lot more with Vue 3 recently. And with Vue 3 comes the Composition API (inspired by React Hooks) - including helper libraries with lots of awesome utilities baked in.

One of these is VueUse. It's a collection of Vue composition functions to do all kinds of cool stuff. Some of the ones I've already enjoyed:

1. ​"useLocalStorage" to easily sync state with Local Storage.
2. ​"useStepper" to create and manage multi-step forms.
3. ​"useDraggable" to make elements draggable while keeping track of their position

​It's an awesome library, and definitely worth checking out if you're working with Vue 3!

​Check out the full list of composition functions in the docs​

​

3. A beautiful blog

Let's round out today's issue with an amazing personal blog.

This website is honestly one of the best I've seen in a while.

It's beautiful, has great content, and is generally just a joy to browse. Just what the Internet was made for! Example:

​All credits to the author of course - so check it out for yourself 🔥​

​

That's it for now! See you soon

​

Did you enjoy today's newsletter?

​👍 Yes, it was amazing!​

​😐 Eh, I guess it was ok​

​👎 Not really at all​

​

​

I would really appreciate if you would share the newsletter with your friends on Twitter, LinkedIn, Facebook, by email or copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow. See you in 2 weeks ✌

— Mads Brodt