Practical articles on React, automated testing, component design, state, edge cases, and the process of making applications easier to change.
It's not always obvious which tests we should be writing for our React components. One way to solve this problem is to use a combination of Input Space Partitioning and Whitebox testing to guide us during the process.
It's not always obvious how to decompose a React component. This article explains a guideline you can use to validate a decomposition.
Learn about: testing, relying on TypeScript to improve correctness, and modeling data-structures while building a multilevel-list React component. In this part, we'll focus on modeling the underlying data structure to support the multilevel-list component.
When we're uncertain of what tests to write for an application, we might have more significant problems than we're aware. Here's what to do about it.
In this article, we'll go over a process to deal with bugs in our React applications. This process seeks to not only fix current bugs but also to prevent future ones.
If you're not sure how to test a specific part of your React application, this article might be useful to you.
In this article we'll go over a solution to test React components that exhibit some behavior when the current route changes.
A common question to have when we're starting to learn React is how important it is to know how to write automated tests. This article answers that question.
In this article, we'll go over the thought process for testing a React application that fetches and displays data.
If you're not sure what tests you should write for a feature in your React app, knowing how to make a test list can show you how to get started.
In this article we go over an alternative to mocking modules with Jest, that easily allows for different mock responses on a test per test basis.
If you've started a project with Create React App, index.js will probably make your test coverage fail. Here's how to solve that.
If you don't have experience writing tests, getting started can be daunting. Especially if you're trying to test code that interacts with a framework/library like it is when you're testing a React application. In this article we'll go over the usual tools to test a React application, how to get unstuck when we don't know how to test a piece of code, and also a basic testing methodology that allows us to get started right away.
Fetching data from APIs is something that almost all React applications do. However, this doesn't mean doing it correctly is simple. While it's easy to fetch data an show it on the screen, it's not trivial to get all the corner cases right. The first step to handle those corner cases is to be aware of them. So in this article, we'll go over questions we can make to help us find out corner cases when fetching data from an API.
When we want to add an infinite scroll to a React app, we can try to find a library that already does it for us, or we can implement our version from scratch. Since building things is one of the best ways to improve as a software developer, in this article, we'll go over how to develop an infinite scroll.
A common misconception with useMemo and useCallback is that they can be used to preserve the identity of values across React components renders. However, what they have been designed for, is performance optimization. And not being aware of the difference, may be a source of bugs.
Whenever we're developing a React application that has to communicate with an API, we'll probably run into Cross-Origin Resource Sharing (CORS) errors. In this article, we'll go over how to fix those errors.
One of the best ways to improve as a developer is to understand how the tools we use work. If you've been working with React for a while, and you are pretty comfortable working with its API, it's time to find out it works under the hood. In this article you'll find a compilation of resources that will help you understand how React does what it does.
Decision-making is always present during software development. However, it's not always that clear which decision we should make. When in doubt, it's always useful to have in mind what will make our software valuable, so that with every decision we can take a step forward into that direction.
We sometimes get insecure about the quality of the code of our React applications, even thought it does what it should. In this article I'm sharing mental models and a strategy we can use to get more confident about the code we make.
Animating an image when it changes in React requires an understanding of how React works and what it does under the hood. In this blog post we'll explore a way to animate an image when it changes, while keeping in mind what is happening at a DOM level.
Sometimes the best approach to passing state between multiple components, is to not have multiple components at all.
An explanation on why we should use React useState hook functional update, even when it seems unnecessary.
A guide to implement and understand a solution to perform a search when user stops typing, in a controlled component, using React and hooks.
How to persist state after a page refresh in React using local storage