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…

When using Redux-connected components, there can be as many as three sources of props:

  • props passed from the parent component,
  • props returned from mapStateToProps,
  • props returned from mapDispatchToProps.

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 sessions and 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…

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…

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

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…

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