Answering React-related questions on Stack Overflow, I’ve noticed that there are a few main categories of issues people have with the library. I’ve decided to write about the most common ones and show how to handle them in hopes that it’ll be helpful to those new to React or anyone in general, who’s struggling with its basic concepts. Both pitfalls of using Class based components and Functional components that use hooks are covered interchangeably.
The state in React is considered immutable and therefore should not be directly changed. A special
setState method and the setter function from
useState hook should…
When using Redux-connected components, there can be as many as three sources of props:
When used with TypeScript, all those props need to have types. If it’s a stateful class-based component, the state needs to be typed as well. This is a lot of manual type declaration, which also has to be maintained in the future. Luckily, starting from version 7.1.2 of
@types/react-redux package it's possible to automatically infer types of connected props in most cases. …
Developers often find themselves in situations where they need to return different result based on various conditions. One specific case where this happens often is when we want to render different JSX inside component based on some state variable that can be toggled.
As a result, oftentimes the code ends up looking like this:
Here’s a simple example where we have a data card, as a part of some analytics dashboard, with predefined styles and layout. The card allows switching between
post data. The only elements that are changing are the card icon and title, so it…
Component libraries are all the rage these days, with many companies rolling out their own solutions or sticking to a bunch of open source alternatives. Leveraging a component library for UI development, particularly in large teams, has a lot of great benefits. It allows to take full advantage of modular and reusable UI components, which brings increased speed of development and unifies styles across multiple teams and apps. Combine that with a robust design system, and the handover from design to development teams becomes smooth and more efficient.
Frameworks/libraries like React, Vue, etc are perfectly suited for this purpose since…
It is quite common to use
Set to remove duplicate items from an array. This can be achieved by wrapping an existing array into
Set constructor and then transforming it back into array:
This works great for arrays of primitive values, however when applying the same approach to array of arrays or objects, the result is quite disappointing:
This is because
Set compares non-primitive values by reference and not by value, and in our case all values in array have different reference.
A bit less-known fact is that
Map data structure maintains key uniqueness, meaning that there can…
In the previous post we added a basic recipe form using React Hook Form. It would be a good idea to add some unit tests for it, to make sure that the form works properly and to catch any future regressions. We’ll use React Testing Library (RTL) as a testing framework of choice, since it works really well with the Hook Form and is a recommended library to test it with.
Let’s start, as usual, by installing the required packages.
npm install --save-dev @testing-library/react @testing-library/jest-dom
Apart from the testing library, we also add jest-dom to be able to use custom…
When I first started working with Redux I was impressed with its capabilities and how nicely it can abstract some complex component logic into actions. However, I was also surprised by how much boilerplate it requires to get properly set up in complex applications.
First, you need to declare action types, then…
As React developers, we often need to set up new components, hook them up with the existing infrastructure, or scaffold an application. That’s a lot of repetitive manual work, which even though doesn’t happen that often, can be quite tedious and frankly, boring. The good news is that it can be easily automated with code generators. These generators can be also shared with other developers, increasing code consistency inside a team.
In this post, we’ll use the plop package to setup generators that would create React component folders either from scratch or add a new component to an already existing…
A while ago I was answering an interesting question on Stack Overflow about the type of
NaN. And indeed if you type in your browser console
typeof NaN === 'number' you'll get
In Ruby, for example,
NaN can be either an instance of
In the last post, we’ve built a Tic Tac Toe game with React Hooks and Styled components. However, it’s missing one crucial part of the development process — testing. In this post, we’ll fix this omission by adding the tests to the TicTacToe component. Additionally, this seems like a good opportunity to compare two of the most popular React testing tools — Enzyme and React Testing Library. As a refresher, the final version of the game can be found here and the code is available on Github.
The point of this comparison is not to try to decide which framework…