Image for post
Image for post

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.

1. Directly modifying the state

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 be used instead. …


Image for post
Image for post

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 sessions and post data. The only elements that are changing are the card icon and title, so it makes sense to introduce cardType boolean, based on which the appropriate icon and title are rendered. …


Image for post
Image for post

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 they are designed to be highly modular. In this post React and Styled Components are used as main tools of choice for developing components. …


Image for post
Image for post

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 be no more than one key-value pair with the same key. While knowing this won’t help us magically transform any array into array of unique values, there are certain use cases which can benefit from Map's key uniqueness. Let's consider a sample React app, which displays a list of books and a dropdown that allows filtering books by their authors. …


Image for post
Image for post

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 Jest matchers. Now we can start writing tests for the Recipe component. Let’s create Recipe.test.js file and add the first test checking that basic fields are properly rendered. …


Image for post
Image for post

In my previous post, we saw how easy it is to get up and running with JavaScript code generators on the example of React components. In this post, we’ll build on that knowledge and dive deeper into generating code with a more advanced example — scaffolding Redux boilerplate.

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 import them into action creators and define action creators themselves. Of course, action creators are optional, but they make the code cleaner. Finally, the action types have to be imported into the reducer, which also requires setting up. The number of steps increases when you throw Redux middleware into the mix. This is particularly relevant in case Redux is used to handle API calls. In such a case, you often want to show a loading indicator when data is being fetched, and then either display the data after it’s loaded or show an error message when something goes wrong. I’d end up using three action types just for one API call — ACTION_BEGIN, ACTION_SUCCESS, and ACTION_ERROR, or some variation of them. …


Image for post
Image for post

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 folder. …


Image for post
Image for post

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 true. The comments to the answer made me realise that this is not another one of JavaScript quirks, but in fact a standard feature of all the programming languages that implement The IEEE Standard for Floating-Point Arithmetic (IEEE 754).

In Ruby, for example, NaN can be either an instance of Float or BigDecimal.

And indeed, if we look at the ECMA-262, 10th edition, the ECMAScript Language Specification, section 4.3.21 states that number type represents a “set of all possible Number values including the special “Not-a-Number” (NaN) value, positive infinity, and negative infinity”. A few subsections below, section 4.3.24


Image for post
Image for post

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 is the best, but to illustrate the differences in their approach. …


Having been working with React for a few years already, I realised that I have only used the framework for developing websites and mobile applications. With the addition of the Hooks, I thought it would be interesting to make a small game, to get a bit more into how React lifecycle works. For the game choice, I decided to convert a jQuery version of Tic Tac Toe, I built a few years ago, to React, which proved more challenging in the end than I expected. …

About

Alex Khomenko

Front-end developer at Grafana Labs. Writing about React, Styled-components/emotion and everything around JavaScript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store