Do I still need to bind React functions in 2019?

To bind or not to bind - that is the question

One of Reddit members asked me a question in follow-up to my answer to a question about this keyword:

Why do I need to bind a function if it’s in a class?

Short answer

You don’t need to use bind. If you use the following syntax to declare class methods, then this in them will be automatically bound to the current class instance. It’s magic.

It's magic

class MyComponent extends React.Component {
  myMethod1 = () => {
    ...
  }
  myMethod2 = () => {
    ...
  }
}

Note the absence of const keyword.

That syntax was introduced in ES6 class field declarations proposal and already widely supported. That is what you should do when you write React class-based components in 2019. bind is obsolete.

Read more →

When should I use “this” keyword?

To this or not to this?

When you browse through Javascript code, you often see function calls prepended with this. keyword, like this.functionName(). However, sometimes this is missing and it’s just functionName(). What is the difference and when you should use one over the other?

That depends on whether you React component is functional or class-based.

Read more →

Why do I need props?

Props???

If you are new to React, you may be wondering what that props business is all about. Components make sense. But why do they need props? Why should you use them, or then, or how? After all, you can build a perfectly functioning React application without those pesky props.

Well, you don’t have you use props inside your React components. It is fair that not all the components require props. But still, they are worth understanding. And here is why.

Read more →

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 →

Subscribe and receive an email when I publish a new article

* indicates required