Painless React Animations via CSS Transitions

CSS Heart art

CSS art by Dennis Harry

Animating things on the web is a pretty common task. You often need to animate a menu bar sliding from the top, or an input field expanding and collapsing when you click a button. But how do you do that?

Maybe there is a library for that? Yes, lots. But which one you should choose? When you are pressed with a deadline, you don’t have time to plough through lots of libraries and their documentation, you just want to know the simplest way to do what you need as simple and as quick as possible.

Fear no more. I will show you everything you need to know to cover most of your React animation requirements. In this article, we will cover CSS Transitions which is the easiest way to animate elements on the web page. Moreover, you will see why CSS transitions are one of the simplest yet coolest techniques on the web.

Read more →

Why my setState doesn’t work?

Confused man

Photo by Bruce Mars

setState is one of the most essential operations in React. Yet, it is one of the most confusing. If you are new to React, then you may feel that it does not always do what you want it to do. It is almost as it doesn’t work. The problem may go like this:

You set a state with a setState

   this.setState({count: 1})

Then you follow it with another setState which references the previous state value

   this.setState({count: this.state.count + 1})

Then you check the state value, and it is not what you expect it to be

   colsole.log(this.state);  // Prints 1

What? Is setState broken?

Keep calm. setState is fine. Keep reading, and I will help why that is happening and how to avoid that.

Read more →

What is React.PureComponent and when to use it

React 15.3 introduced PureComponent - a new way of implementing class-based components. It is now available to us alongside function-based components and components derived from React.Component.

This new technique caused much confusion in React rounds. Is PureComponent a new improved version of React.Compoment? Does it automatically make everything better? Should you just slap PureComponent everywhere and enjoy your faster React app?

Read more →

What is the difference between functional and class-based React components?

React offers two ways to define components: they can be functional or class-based. If you are new to React, you may be wondering what the difference is between them. The React documentation doesn’t clearly explain when and why you would use one or the other, and what the pros and cons of each type are.

In this article I will help you understand the difference between functional and class-based components. You will know why you may prefer one over another.

Read more →

How to pass a value to onClick event handler in React.js

The problem

If you ever tried to pass a parameter to onClick event handler, you know that it is not straightforward.

If you didn’t, here is why may want to. Imagine a scenario where you have a group of three buttons. When you click on one of them, you want to know which one was clicked and perform an appropriate action. You have a choice of creating three onClick event handlers, one for each button, or one hander for all the buttons and pass a parameter identifying the clicked button into it. Which option do you choose? Clearly writing one handler should be less work, right?

Unfortunately, passing a parameter into an event handler in React is not straightforward. If it were, there wouldn’t be multi-page discussions about just that. By the way, the accepted answer on that Stackoverflow thread lists an “Easy way” along with “Better way” and an “Old easy way”. The “Easy way” is indeed easier, but has a performance impact. And a “Better way” is in fact not that easy. Is that confusing, or is that just me?

However, don’t despair! I will show you how you can pass not even one, but multiple parameters into an onClick event handler. In fact, you can apply the same technique to any React event handler. That approach is both easy to implement and has no performance impact.

Read more →

Subscribe and receive an email when I publish a new article

* indicates required