When it comes to building complex React applications, useSWR is a blessing. It takes away all the complexity of storing and caching your API responses. Most of my applications no longer need global state management.
Today I would like to discuss two advanced (and related) use cases for data fetching with useSWR. Dependent fetching, and conditional fetching.
Some of the advantages of dependent and conditional fetching include: simplifying application structure, reducing database lookups and improving application performance.
Dependent fetching happens when you have a fetch request that relies on the fetching of other data before it can begin. SWR takes care of all the complexity surrounding this problem. …
With the start of a new year comes reflection. Thinking back on how I made React applications in the last, I can see that a lot has changed.
I used to use redux for all of my projects, now I simply use react-hooks. I used to test with enzyme, now I use react-testing-library. I used to use CSS in JS libraries like emotion and styled-components, now I use plain CSS and Tailwind.
So these are the libraries I use by default in all of my new React projects in 2021. I wonder if this will change in the next year. …
When I first started working with React in 2016, boilerplates were all the rage. Almost everyone recommended starting your new project with one of the many boilerplate options, with react-boilerplate being the most popular.
Fast forward to 2021, and that’s no longer the case.
When we first started working with React, there was no “one” way, or a CLI to create a new project. We had to set up our projects by installing dev dependencies like webpack to bundle our code, babel to transpile it, and had to configure webpack on our own.
The setup became even more complex when you wanted to support advanced features like server-side rendering. …
2020 has been a difficult year for all of us, but it’s been a year of incredible growth for this publication.
While an international move slowed down progress on Frontend Digest towards the end of 2020, I’m looking forward to spending more time and effort growing this publication in 2021.
If you’re looking interested in writing for us and looking for inspiration, take a look at our best performing pieces of 2020. …
Tailwind is by far, the most popular utility CSS framework. It’s changed the way we build web applications, and how we work with CSS. It’s themeable, extendable, and easy to work with.
I love Tailwind because it lets me concentrate on shipping. I can build full features, full pages, without ever leaving my HTML. Instead of having to write
display: flex; everywhere, I can just use a class name. I enjoy the utility first approach championed by Tailwind.
Tailwind 2.0 is the first major release since Tailwind 1.0 …
Don’t get me wrong. I love my job. My coworkers are great, the salary is nice, and the freedom to work remotely is amazing. But that doesn’t mean there aren’t things that I have about being a programmer.
I have worked full time as a Frontend Developer for about five years. I’ve worked for agencies, for product companies, in North America and in Europe. And at every one of these companies, I’ve found these problems.
These are the things I hate most about my job.
Scrum is the most popular software development methodology. If you have worked as a software developer over the last decade, it’s been almost impossible to avoid it. …
NextJS is a popular framework for making high performance, server-rendered React applications. Originally released in 2016 by Vercel, NextJS has come a long way. It’s now one of the most popular frameworks for not only building server-rendered applications but also for building static sites.
Let’s go over what’s new in this release, and why we are so excited for the future of NextJS.
NextJS 10 introduces a new component: next/image. The NextJS team worked with the Google Chrome team to create this component that offers performance as a default. With this component, our images are automatically lazy-loaded and responsive.
One of our biggest complaints with NextJS was their lack of an alternative for the great gatsby-image component. Not anymore! And since next/image optimizes our images on demand, our builds remain fast, no matter how many images we add to our application. …
The Fetch API supports cancelling requests using
AbortController interface. We can therefore cancel in-flight requests in our applications without the need for including external fetching libraries like axios.
Above we can see how we can use an
AbortController to cancel an in-flight fetch request.
But this basic example is not indicative of how you would use this API in your applications. Let’s instead look at a real world example.
We will create a React application that allows users to type in a search term. Then our application will call an API, and return a list of matching users. …
Suspense for Data Fetching is an experimental feature in ReactJS. It allows us to “wait” for some code to load, and to declare a loading state while we are waiting.
useSWR is a library that takes all the complexity out of data fetching and data caching in React applications. useSWR also supports React Suspense for data fetching.
If you are unfamiliar with useSWR, be sure to check out our previous article on the subject.
Let’s start by creating a brand new Create React App. Run the following command.
npx create-react-app --template typescript suspense-swr
After it finishes installing our dependencies and bootstrapping our application,
cd into the directory and run
yarn add swr. …
Create-React-App allows us to scaffold new React applications. It’s an incredibly useful tool for building React applications. It keeps all of our dev dependencies like webpack, ESLint and babel inside of react-scripts. That means, that in order to update these dependencies, we need to wait for an update to Create-React-App. Lucky for us, that day is here.
Yesterday Create-React-App version 4 was released.
Let’s go over the new features you can expect from updating, and the migration steps you may have to go through to successfully upgrade.
If you have worked with NextJS, then you know just how awesome Fast Refresh is. Fast Refresh is a replacement for React Hot Loader. Its big advantages include amazing performance and state preservation on component reload. …