Improve async network state handling with custom React Hooks
In this article, I’ll cover the various states that network requests exist in and show you how to keep request management within custom Hooks. I’ll also walk you through building a small app that employs these Hooks.
ReadBuild a React Multi step Wizard with Formik and React Query
Multi step wizards are a solution allowing complex challenges to be broken down to a list of steps needed to accomplish a goal. Sometimes branching conditional logic is used to narrow the path to be taken by the user..
ReadPt 7: Build a CSS-in-JS React App with Styled Components and Priceline Design System
We will learn how to build a feature that progressively displays author information upon interaction. In the course of building this feature, we will learn techniques such as rate limiting using `debounce` and `lodash` and cache memoization to avoid memory leaks and improve performance.
ReadPt 6: Build a CSS-in-JS React App with Styled Components and Priceline Design System
Last time around we explored the use of infinite scrolling techniques to improve perceived responsiveness. Today, we will explore skeletal content placeholder screens as a technique for improving perceived app response times. We will also look at action notifications as an effective feedback mechanism.
ReadPt 5: Build a CSS-in-JS React App with Styled Components and Priceline Design System
Today, we'll explore a few techniques for improving perceived responsiveness for apps. We'll be looking at a few such techniques today (even though there are much more sophisticated and code intensive techniques out there). We'll use a technique that is employed by some of the most popular apps available today. Stay with us to find out more.
ReadPt 4: Build a CSS-in-JS React App with Styled Components and Priceline Design System
Previously on this series, we learned more about state management in large applications and the benefits we could gain by adopting an architecture like Flux. We also add Redux application functionality to our FireLiners app complete with actions and Sagas. Today, we'll do just a little bit more. We'll be going in-depth into more state management practices and we'll setup dynamic data that we'll be using to populate our feed. Finally, we'll add functionality that allows us to persist our state to local storage.
ReadPt 3: Build a CSS-in-JS React App with Styled Components and Priceline Design System
Previously on this series, we learned about lazy loading and its multiple performance benefits for our application. We then proceeded to implement lazy loading within our application using the `react-loadable` NPM package. We also created some custom styled components for our application. Today, we'll do just a little bit more. We'll setup a state management system for our application. We'll also setup route transition animations for smoother switches from one route to another.
ReadPt 2: Build a CSS-in-JS React App with Styled Components and Priceline Design System
Last time on this series, we explored the CSS-in-JS paradigm and code splitting with Webpack. We also built a minimal app interface that uses styled components for displaying notable lines from hip hop verses. Today, we'll do some more development. We'll learn how to lazy-load on-demand route based code (i.e code specific to a certain route). We'll also explore more Priceline components and create some of our own components that leverage preexisting Priceline components.
ReadPt 1: Build a CSS-in-JS React App with Styled Components and Priceline Design System
As web/mobile application developers and software creators, we are always on the lookout for ways we can improve the performance and quality of the experience of the solutions we architect. On the web, we can enhance the performance of our application as regards loading time by minimizing the number of HTTP requests we make for critical assets. If we can reduce the number of requests for CSS and JavaScript assets our application makes, we get improved load times.
Read