Lazy loading React components with React.lazy
Since React introduced the lazy function, lazy loading components have become easier than ever. In this tutorial, you'll learn how you can…
Felix Gerschau
Felix Gerschau is a web developer specializing in front-end development.
Latest posts
React Component Composition Explained
Component composition is a powerful pattern to make your components more reusable. If you are already familiar with React, you're probably…
Building a SaaS application from scratch
Over the last year and a half, I've been reading a lot about micro-SaaS , indie hacking , and building a profitable side project online…
Using setTimeout in React components (including hooks)
Using the setTimeout function works the same in React as it does in plain JavaScript. However, there are some caveats that you need to be…
How to use React's forwardRef function
forwardRef is a helper function from React that allows us to forward a component's ref to another one. This tutorial will teach what all of…
How to test Redux-connected React components
Testing React components connected to a Redux store can be a challenging task that raises a few questions. What's the best way to ensure the…
React Context Examples
This page will give you some code examples of how to use React Context in different scenarios, including function and class components and…
How to use React Context with TypeScript
The React Context API allows us to make data globally available. We could also do this by passing down props, but this isn't very efficient…
Separation of concerns with React hooks
If you've been working with React for a while, you probably came across container and presentational components , or smart and dumb…
JavaScript iterators and generators: A complete guide
Originally posted on Logrocket . With the introduction of ES6 , iterators and generators have officially been added to JavaScript…
How to easily manipulate URL search parameters in JavaScript
In this article, I will explain cover how you can convert a query string into an object and vice versa, which will allow you to easily get…
Get paid for writing developer tutorials
If you have written for developers online before, chances are that you've heard of DigitalOcean's "Write for us" program, which pays you for…
Form validation with React Hooks WITHOUT a library: The Complete Guide
In the early days of the internet, HTML forms were the first way of interacting with websites. The internet has come a long way since, but…
React and TypeScript: How to find the right event type
JavaScript in the browser already includes a series of HTML events to which JavaScript can listen and react. The most used ones are events…
How TypeScript helps you build better React apps
In which situations should you give React with TypeScript a try, and when is it better to stick to JavaScript? Speaking of my own experience…
How to create React components with TypeScript
Using TypeScript together with React has proven to be a powerful combination. Some people are afraid to move to TypeScript because they…
Getting started with React and TypeScript
TypeScript and React are a great match, which already becomes clear during the setup of a project. The setup isn't as complicated as you may…
How to use React's useHistory() hook
The useHistory hook allows us to access React Router's history object. Through the history object, we can access and manipulate the…
How to use React's useRef() hook
At first sight, it may not be clear what purpose the useRef hook fulfills. If you know how to use it, however, it can be a useful tool in…
How to use React's useEffect() hook
In this article, I want to explain everything you need to know about the useEffect React hook. What is the useEffect hook about? The…
My Favorite Programming Books 2020
At the beginning of this year, I started reading again, including fiction, non-fiction, and programming books. While I didn't read many (…
JavaScript Heap Out Of Memory Error
I've encountered this scary-looking error on multiple occasions when my application ran out of memory. In this short article, I'll first…
JavaScript's Memory Management Explained
Read in Chinese or Korean Most of the time, you can probably get by fine not knowing anything about memory management as a JavaScript…
forEach() vs. map() — JavaScript Array Function Comparison
In this article, I'll compare the JavaScript array functions forEach and map . After reading this, you should know when to use which…
JavaScript Event Loop And Call Stack Explained
My goal with this article is to teach you how JavaScript works in the browser. Even though I've been working with JavaScript my whole career…
What is Project Fugu? More power to the web
Progressive Web Apps (or PWAs ) have brought us things like offline and app-like experiences to the web. The web capabilities project…
How to Persist React State in Local Storage
Persisting the state of React applications is a great way to contribute to a more cohesive user experience by saving the user's progress or…
My 9 favorite topics of "The Pragmatic Programmer"
The Pragmatic Programmer 20th Anniversary Edition The first edition of this book was released in 1999 and has become one of the most…
How to Create Web Push Notifications - Full Tutorial
Push notifications are everywhere, from news and messenger apps to fitness and health applications. They are a great tool for increasing…
Unit testing React - What you need to know
About 2 years ago, after I joined my current company, a colleague and I had the task to start writing unit tests for our React applications…
Periodic Background Sync Explained
There are a few situations where the internet connection isn't optimal, but you still want to check your phone for news, social media, or…
Service Workers Explained - Introduction to the JavaScript API
On this blog, I already wrote a few articles about Progressive Web Apps (PWAs) — including a full tutorial that walks you through…
Top 10 Web Developer Blogs in 2020
This is a different article for me since I usually write technical articles about React , PWAs , or web performance . Ever since I…
High Performance Mobile Web by Maximiliano Firtman - Review and notes
Last month (May 2020) I read this book on web performance by Maximiliano Firtman. I'll give you a short summary of the key takeaways of the…
Service Worker Lifecycle Explained
The Service Worker lifecycle is arguably the most complex part around Service Workers and Progressive Web Apps (PWAs). I only felt like…
How to Make your React App a Progressive Web App (PWA)
The tutorial includes setting up a Service Worker with Webpack and Workbox , making it work with TypeScript and ESLint , adding a…
When does React re-render components?
React is known for providing a fast user experience by only updating the parts of the UI that have changed. When looking into React's render…
How to use React.memo() to improve performance
React internally already optimizes the performance quite a bit without having to explicitly optimize for performance. React.memo can help…
Getting into Performance Budgets
Improving the performance of your webpage shouldn't be a one-time task. Performance budgets help you to make sure that your page stays fast…
Premature Optimization in JavaScript
We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass…
Custom Metrics with WebPageTest and TravisCI
Monitoring the performance of your web application is key to having a nice user experience, even when more features get added with time…
Measuring the Performance of JavaScript Functions
Measuring the time it takes to execute a function is always a good idea to prove that some implementation is more performant than the…
How to communicate with Service Workers
MessageChannel, Broadcast API and Client API compared for using a two-way communication Service Workers are great. They allow web developers…
PWA Update Notification with Create React App
Watch my PWA online course 📹 You can now watch my course on how to turn your React app into a PWA on Skillshare. Learn what you need to…